CSS 超级武器：Stylus 与 Flexbox 强强联手，打造极致响应式动画界面（上篇）

前言：CSS 的"进化论"

你是否还在为冗长的 CSS 代码、重复的属性、复杂的媒体查询而烦恼？

你是否渴望一种更高效、更优雅、更具编程感的 CSS 编写方式？

今天，我们将揭开 Stylus 的神秘面纱------这门富有表现力的 CSS 预处理器，将带你进入一个全新的"编程式 CSS"世界。

同时，结合现代布局的核心------Flexbox，我们将构建一个极具视觉冲击力的响应式动画界面。

---

一、Stylus：CSS 的"超级外挂"

1. 什么是 Stylus？

Stylus 是一门CSS 预处理器，它扩展了 CSS 的语法，支持：

• 变量（Variables）
• 函数（Functions）
• 混合（Mixins）
• 嵌套（Nesting）
• 自动前缀（Autoprefixer）

但它有一个前提：浏览器无法直接解析 Stylus ，必须编译成标准 CSS。

2. 快速上手

安装

npm i -g stylus

编译

# 一次性编译
stylus style.styl -o style.css

# 监听模式（边写边编译）
stylus style.styl -o style.css -w

开启 -w 模式，保存 .styl 文件后，自动更新 .css，开发效率飞升！

---

二、Stylus 的核心特性：让 CSS 更"聪明"

1. 嵌套（Nesting）------告别重复选择器

传统 CSS：

.container .panel {
  margin: 10px;
}
.container .panel h3 {
  font-size: 24px;
}

Stylus 写法：

.container
  .panel
    margin 10px
    h3
      font-size 24px

优势：

• 结构清晰，层级分明。
• 减少代码重复，提升可维护性。

2. 变量（Variables）------统一设计系统

primary-color = #fff
transition-time = 0.7s

.panel
  color primary-color
  transition all transition-time ease-in

💡 修改 primary-color，全局生效，告别"改一个颜色，改十处代码"的噩梦。

3. 混合（Mixins）------代码复用利器

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

.panel
  border-radius 50px

Stylus 可自动添加浏览器前缀，无需手动编写。

---

三、Flexbox：移动端布局的"主角"

1. 什么是 Flexbox？

通过 display: flex，开启弹性格式化上下文，实现父子协同的布局方案。

2. 核心概念

概念	说明
主轴（Main Axis）	子元素排列方向，默认 row（水平）
交叉轴（Cross Axis）	垂直于主轴的方向，默认 column（垂直）
justify-content	主轴对齐方式
align-items	交叉轴对齐方式

3. 实战：居中布局

body
  display flex
  justify-content center
  align-items center
  height 100vh

一行代码，实现水平垂直居中 ，告别 position: absolute 和 transform 的复杂计算！

---

四、项目实战：构建"全景探索"界面

1. HTML 结构

<div class="container">
  <div class="panel" style="background-image: url(...)">
    <h3>Explore The World</h3>
  </div>
  <!-- 更多 panel -->
</div>

• 使用 style 属性内联背景图，方便动态管理。

2. Stylus 布局代码

*
  margin 0
  padding 0

body
  display flex
  flex-direction row
  justify-content center
  align-items center
  height 100vh
  overflow hidden

.container
  display flex
  width 90vw
  .panel
    height 80vh
    border-radius 50px
    color #fff
    cursor pointer
    flex 0.5
    margin 10px
    position relative
    background-size cover
    background-position center
    background-repeat no-repeat
    transition all 0.7s ease-in
    h3
      font-size 24px
      position absolute
      bottom 20px
      left 20px
      margin 0 
      opacity 0
      transition opacity 0.7s ease-in 0.4s
    &.active
      flex 5
      h3
        opacity 1

代码解析：

1. flex 0.5

• 每个 .panel 初始占据 0.5 份空间，保持紧凑。

2. &.active

• & 代表父级选择器，等同于 .panel.active。
• 激活时，flex: 5，占据更多空间，实现"展开"效果。

3. transition

• all 0.7s ease-in：所有属性变化添加 0.7 秒缓入动画。
• opacity 0.7s ease-in 0.4s：标题透明度动画，延迟 0.4 秒执行，营造层次感。

---

五、响应式设计：@media 媒体查询

@media (max-width: 480px)
  .container
    width 100vw
  .panel:nth-of-type(4),
  .panel:nth-of-type(5)
    display none

适配移动端：

• 条件：屏幕宽度 ≤ 480px（如 iPhone SE）。

• 操作：

  • 容器宽度占满全屏。
  • 隐藏第 4、5 个面板，避免内容过多。

Stylus 支持在嵌套中使用 @media，逻辑更清晰。

---

六、JavaScript 交互：激活与切换

const panels = document.querySelectorAll('.panel');
panels.forEach(function(panel) {
  panel.addEventListener('click', function() {
    const activePanel = document.querySelector('.active');
    if (activePanel) {
      activePanel.classList.remove('active');
    }
    panel.classList.add('active');
  });
});

交互逻辑：

1. 点击任一面板。
2. 移除当前 .active 类。
3. 为点击的面板添加 .active 类。
4. Stylus 中的 &.active 规则生效，触发动画。

---

结语（上篇）

我们已用 Stylus 和 Flexbox 打造了一个视觉惊艳的界面。

下篇，我们将深入探讨 Stylus 的高级特性 、性能优化 和 工程化实践，让这套技术栈真正融入你的开发流程。