用 Stylus 写 CSS：一种更简洁的样式开发体验在前端开发中，CSS 是构建网页视觉体验的核心语言。但随着项目规模

Stylus 实战：用更简洁的语法写 CSS 是什么体验？

在前端开发中，我们每天都在和 CSS 打交道。但你有没有过这样的感受：

“为什么写个嵌套样式要敲这么多大括号和分号？”
“.container .item:hover .icon 这种选择器，写三遍都嫌累。”

Sass 和 Less 确实解决了变量、嵌套等问题，但它们大多沿用了“类 CSS”的语法——依然充斥着 {}、;、:。而如果你愿意尝试一点不同的东西，Stylus 可能会给你一种“原来 CSS 还能这么写”的清爽感。

作为一名前端开发者，我想分享一个好用的工具：Stylus。

本文不是劝你放弃 Sass，而是想告诉你：在个人项目、快速原型或对代码洁癖有要求的场景下，Stylus 依然值得尝试。

Stylus 是什么？它凭什么“简洁”？

Stylus 是 Node.js 社区在 2010 年推出的 CSS 预处理器，与 Sass、Less 同期诞生。它的设计哲学很特别：

让 CSS 写起来像写配置文件，而不是写机器指令。

它的最大特点就是：语法极度自由。你可以：

完全省略 {}、;、甚至 :
用缩进表示层级（类似 Python）
混合使用“符号风格”和“无符号风格”

举个例子：

// style.styl
.card
  width 100px
  height 100px
  background #333

编译后生成标准 CSS：

.card {
  width: 100px;
  height: 100px;
  background: #333;
}

是不是看起来更像Python？没有冗余符号干扰，逻辑一目了然。这种“简洁”设计，让我在写样式时能更专注于布局和视觉逻辑，而不是语法仪式。

快速上手：三步跑通

1. 安装（需 Node.js）

npm install -g stylus

2. 创建 `.styl` 文件

比如 style.styl，写入任意样式。

3. 编译为 CSS

stylus style.styl -o style.css

实际开发中，建议通过构建工具自动编译。例如在 vscode 中安装 stylus插件，保存即生效，无需手动命令。

实战：用 Stylus 实现一个“点击展开面板”

我们来做一个经典交互：点击某个面板，它放大显示，其余缩小。这个例子能充分体现 Stylus 的嵌套优势。

HTML 结构

<div class="container">
  <div class="panel active" style="background: #6a11cb">Panel 1</div>
  <div class="panel" style="background: #2575fc">Panel 2</div>
  <div class="panel" style="background: #00c9ff">Panel 3</div>
</div>

Stylus 样式（重点看嵌套写法）

body
  margin 0
  display flex
  justify-content center
  align-items center
  height 100vh
  font-family -apple-system, BlinkMacSystemFont, sans-serif

.container
  display flex
  width 90vw

.panel
  flex 1
  height 80vh
  margin 5px
  border-radius 12px
  color white
  display flex
  align-items center
  justify-content center
  cursor pointer
  transition flex 0.5s ease

  &.active
    flex 3

JavaScript 交互

document.querySelectorAll('.panel').forEach(panel => {
  panel.addEventListener('click', () => {
    document.querySelector('.active')?.classList.remove('active');
    panel.classList.add('active');
  });
});

这段 Stylus 代码体现了三大优势：

嵌套直观：&.active 直接写在 .panel 内部，状态逻辑聚合；
无视觉杂乱：没有 {} 和 ;，代码密度更高，阅读更流畅；
结构对齐 DOM：样式组织方式与 HTML 层级一致，降低理解成本。

Stylus 的核心能力一览

特性	说明
变量	`primary = #3498db` —— 统一管理颜色、间距等设计 token
Mixins	封装可复用样式块，支持参数和条件判断
嵌套	减少重复选择器，提升可维护性
流程控制	支持 `if/else`、`for`，适合批量生成栅格、间距系统

例如，定义一个带参数的按钮 mixin：

btn(size = 'medium')
  if size == 'small'
    padding 4px 8px
  else if size == 'large'
    padding 12px 24px
  else
    padding 8px 16px
  border none
  border-radius 4px
  background #007bff
  color white

.my-button
  btn('large')

编译后会自动生成对应尺寸的完整样式，灵活又高效。

为什么现在还值得了解 Stylus？

你可能会问：“Sass 不是更主流吗？还有必要学 Stylus？”

我的真实体会是：

如果你追求极致简洁：Stylus 的无符号语法确实更清爽；
如果你讨厌 SCSS 的冗余：在深层嵌套中，{} 和 ; 确实会干扰阅读；
适合个人项目或快速原型：无需复杂配置，开箱即用；
但团队项目慎用：Sass 社区更大、插件生态更成熟，协作成本更低。

说到底，Stylus 不是“更好”，而是“不同” 。它适合那些对代码美观有执念的人——比如我。

使用建议

浏览器不能直接运行 .styl 文件，必须编译为 CSS；
团队使用前务必统一编码风格（比如是否允许省略冒号）；
可通过 VS Code 插件（如 Stylus）实现自动格式化。

总结

技术没有绝对优劣，只有是否契合场景。如果你觉得原生 CSS 在项目中难以维护，或者希望减少重复代码、提高样式组织效率，Stylus 值得一试。Stylus 虽然小众，但它代表了一种理念：开发者应该为“人”写代码，而不是为“机器”妥协。

用 Stylus 写 CSS：一种更简洁的样式开发体验