🌟 从 CSS 到 Stylus：打造更优雅、高效的样式开发体验

在现代 Web 开发中，CSS 是构建视觉界面的基石。然而，随着项目复杂度的提升，原生 CSS 的局限性也逐渐显现：重复代码多、缺乏逻辑控制、难以维护......于是，CSS 预处理器 应运而生。今天，我们就深入探讨 Stylus 如何让 CSS 编写变得更"超级"吧✨！

🧱 一、原生 CSS 的痛点

先来看看你项目中的 style.css 片段：

css 复制代码

.container .panel {
  height: 80vh;
  border-radius: 50px;
  background-size: cover;
  transition: all 0.7s ease-in;
}
.container .panel.active {
  flex: 5;
}
.container .panel h3 {
  opacity: 0;
  transition: all 0.3s ease-in 0.4s;
}
.container .panel.active h3 {
  opacity: 1;
}

你会发现：

选择器重复（.container .panel 出现多次）
无法复用变量（比如 0.7s、50px）
嵌套关系不直观，层级靠缩进"脑补"

这正是 Stylus 要解决的问题！

🚀 二、Stylus：CSS 的"超级增强版"

Stylus 是一门富有表现力的 CSS 预处理器，语法简洁优雅，支持变量、函数、混合（mixins）、嵌套等特性，能大幅提升 CSS 的编写效率和可维护性。

✅ 核心优势：

特性	说明	示例（Stylus vs CSS）
变量	避免魔法数字	`radius = 50px` → `border-radius: radius`
嵌套	模拟 DOM 层级	`.panel { h3 { opacity: 0 } }`
Mixins	代码复用	`transition(prop, time) { transition: prop time }`
无括号/分号	更简洁	可选语法，提升书写速度
自动前缀	兼容性无忧	`+vendor(border-radius, 10px)`

🛠️ 三、用 Stylus 重写你的样式

假设我们将 style.css 转为 style.styl，它会变成这样：

scss 复制代码

// 变量定义
primary-transition = all 0.7s ease-in
delay-transition = opacity 0.3s ease-in 0.4s
panel-radius = 50px
panel-height = 80vh

// 重置
*
  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 panel-height
    border-radius panel-radius
    color #fff
    cursor pointer
    flex 0.5
    margin 10px
    position relative
    background-size cover
    background-position center
    background-repeat no-repeat
    transition primary-transition

    h3
      font-size 24px
      position absolute
      bottom 20px
      left 20px
      margin 0
      opacity 0
      transition delay-transition

    // 嵌套状态：同一层级的 .active
    &.active
      flex 5
      h3
        opacity 1

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

💡 注意：&.active 中的 & 表示父选择器，编译后就是 .panel.active，完美对应你 JS 中的 classList.add('active')！

🔁 四、编译与开发流程

Stylus 不能被浏览器直接识别，需编译为 CSS：

bash 复制代码

# 全局安装
npm i -g stylus

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

# 实时监听（开发推荐！）
stylus style.styl -o style.css -w

-w 表示 watch 模式，文件一变，自动编译，开发体验丝滑如德芙🍫！

📱 五、弹性布局 + 过渡动画 = 交互魔法

你的项目中大量使用了 Flexbox 和 Transition：

display: flex + justify-content / align-items → 实现居中布局
flex: 0.5 → 初始等宽，点击后 flex: 5 → 放大当前项
transition + opacity → 标题淡入淡出

这些正是现代 Web 动效的核心！而 Stylus 让这些逻辑更清晰、更易维护。

📲 六、响应式设计：为移动端而生

scss 复制代码

@media (max-width: 480px) {
  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}

这段代码隐藏了小屏设备上的后两个面板，适配 iPhone 等窄屏设备。Stylus 同样支持媒体查询嵌套，甚至可通过函数封装断点：

scss 复制代码

mobile()
  @media (max-width: 480px)
    {block}

.panel
  // ...
  +mobile()
    display none

🎯 七、总结：为什么选择 Stylus？

对比项	原生 CSS	Stylus
可读性	一般	✅ 极高（嵌套+缩进）
可维护性	低	✅ 高（变量+函数）
开发效率	慢	✅ 快（少写括号分号）
动态能力	无	✅ 有（条件、循环）

虽然如今 Sass/SCSS 更流行，但 Stylus 的极简语法仍有一批忠实拥趸，尤其适合追求"代码即艺术"的开发者。

🌈 结语

你今天的代码已经非常棒了！结合 Flex 布局 、过渡动画 、响应式设计 ，再用 Stylus 加持，就能写出既美观又高效的样式系统。继续加油，未来的你一定会感谢现在认真学 CSS 预处理器的自己！💪

🌍 正如你的 HTML 中写的： "Explore The World" ------ 而 Stylus，就是你探索前端世界的一把利器！✨

📚 小贴士 ：试试把项目中的 style.css 改写为 style.styl，用 stylus -w 实时编译，感受"超级 CSS"的魅力吧！