用 Stylus 重构 CSS：告别冗余，拥抱简洁高效的样式开发

用 Stylus 重构 CSS：告别冗余，拥抱简洁高效的样式开发

在前端开发中，我们常常要面对大量重复、冗长的 CSS 代码——设置布局、定义动画、编写媒体查询……不仅枯燥，还难以维护。
CSS 预处理器正是为解决这些问题而生，而 Stylus 凭借其极简语法与强大表达力，成为其中极具魅力的选择。

本文将以一个「图片面板伸缩交互布局」为例，带你从原生 CSS 出发，逐步迁移到 Stylus，亲身体验它如何让样式代码更简洁、结构更清晰、开发更高效。

---

一、原生 CSS 实现：功能完整但略显冗长

先看一段典型的交互式布局需求：

• 多个图片面板横向排列；
• 点击某一面板时，它会平滑放大并显示标题；
• 在小屏设备上，自动隐藏部分面板以优化体验。

对应的 CSS 代码如下：

* {
  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;
}

.container .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 700ms ease-in;
}

.container .panel h3 {
  font-size: 24px;
  position: absolute;
  left: 20px;
  bottom: 20px;
  margin: 0;
  opacity: 0;
  transition: opacity 300ms ease-in 400ms;
}

.container .panel.active {
  flex: 5;
}

.container .panel.active h3 {
  opacity: 1;
}

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

核心功能解析：

• Flex 布局：通过 display: flex 实现响应式横向排布；
• 过渡动画：利用 transition 实现面板放大与标题淡入的流畅效果；
• 响应式控制：使用媒体查询在小屏下隐藏第 4、5 个面板，提升移动端体验。

这段代码功能完整，但存在明显问题：
✅ 选择器嵌套关系不直观；
✅ 大量重复的 .container .panel 前缀；
✅ 缺乏模块化，后期维护成本高。

---

二、Stylus 简介：更聪明地写样式

Stylus 是一款功能强大的 CSS 预处理器，支持变量、函数、混合（mixins）、嵌套等特性，且语法极度灵活——可省略大括号、分号，甚至冒号，仅靠缩进表达层级。

📌 浏览器无法直接运行 .styl 文件，需编译为标准 CSS。

快速上手

安装（全局）：

npm install -g stylus

编译命令（监听模式）：

stylus style.styl -o style.css -w

• -o：指定输出文件
• -w：开启监听，文件变动自动重新编译

---

三、用 Stylus 重写：简洁、嵌套、一目了然

同样的效果，用 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 700ms ease-in
    
    h3
      font-size 24px
      position absolute
      left 20px
      bottom 20px
      margin 0
      opacity 0
      transition opacity 300ms ease-in 400ms
    
    &.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

Stylus 的优势体现：

特性	说明
无括号、无分号	语法极简，视觉干扰少
天然嵌套	.panel 内部的 h3 和 &.active 自动继承父级作用域
& 引用父选择器	&.active 编译为 .panel.active，避免重复书写
结构即逻辑	缩进清晰反映 DOM 层级，提升可读性

💡 对比原生 CSS，Stylus 版本减少了近 30% 的字符量，且逻辑层次一目了然。

---

四、关键技术点回顾

1. Flex 布局核心

• 容器属性：

  • display: flex：启用弹性布局
  • justify-content：主轴对齐（如居中）
  • align-items：交叉轴对齐

• 子项属性：

  • flex: 0.5 → 初始占比；flex: 5 → 放大后占比
  • 动态调整 flex 值即可实现“点击放大”效果

2. Transition 过渡动画

语法：

transition: property duration timing-function delay;

示例：

• transition: all 700ms ease-in → 所有可变属性平滑过渡
• transition: opacity 300ms ease-in 400ms → 延迟 400ms 后淡入标题

3. 媒体查询（Media Queries）

用于响应式设计：

@media (max-width: 480px) {
  /* 小屏专属样式 */
}

在 Stylus 中写法完全一致，但可嵌套在组件内部（若配合插件或高级用法），进一步提升组织性。

---

五、CSS vs Stylus：对比总结

维度	原生 CSS	Stylus
语法	严格依赖 {} 和 ;	无括号、无分号，靠缩进
嵌套支持	不支持，需重复写选择器	原生支持，层级清晰
可维护性	中等，大型项目易混乱	高，适合组件化开发
编译依赖	无需编译	需构建步骤（但工具链成熟）
适用场景	小型页面、快速原型	中大型项目、追求工程化与可读性

✅ Stylus 不是取代 CSS，而是让 CSS 更好写、更好管、更好读。

---

HTML

六、结语

通过这个简单的图片面板案例，我们看到：
Stylus 用更少的代码，表达了更清晰的结构，同时保留了全部 CSS 能力。

如果你厌倦了重复的样式前缀、混乱的选择器嵌套，或希望提升团队协作效率，不妨尝试 Stylus——它或许正是你寻找的那把“优雅写样式”的钥匙。

🌟 写样式，也可以是一种享受。