🚀 用 Stylus 写出更优雅的 CSS：提升开发效率的秘密武器在现代前端开发中，CSS 已经不再是简单的样式书写工

在现代前端开发中，CSS 已经不再是简单的样式书写工具，而是一种需要高效管理、可维护性强的工程化语言。虽然原生 CSS 能满足基本需求，但随着项目复杂度上升，重复代码、逻辑混乱等问题逐渐暴露。

今天，我想向大家推荐一个被低估却非常强大的 CSS 预处理器——Stylus。它语法简洁、功能强大，能让你写出更优雅、更具表现力的样式代码。

🔍 为什么选择 Stylus？

✅ 语法简洁优雅

Stylus 支持无大括号、无分号的写法，让代码看起来更“轻盈”。

.card
  width 45px
  height 45px

等价于：

.card {
  width: 45px;
  height: 45px;
}

无需 : 和 ;，缩进代替 {}，写起来就像写 Python 一样清爽！

✅ 支持变量、函数、混合（Mixins）、嵌套

这些特性是现代预处理器的核心能力，Stylus 全部支持。

示例：定义变量

$primary-color = #007bff
.card
  background $primary-color

示例：使用 Mixins（混合）

border-radius($radius)
  border-radius $radius

.card
  border-radius(8px)

这不仅避免了重复代码，还提升了组件复用性。

🆚 CSS vs Stylus：真实场景对比

我们来看一个常见的 UI 组件——按钮的样式定义。分别用原生 CSS 和 Stylus 实现，感受一下两者的差异。

❌ 原生 CSS 写法

.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #0056b3;
}

.btn-primary {
  background-color: #007bff;
}

.btn-danger {
  background-color: #dc3545;
}

.btn-danger:hover {
  background-color: #c82333;
}

看起来很正常，但已经有明显的重复（比如颜色值、hover 样式），且结构略显冗长。

✅ Stylus 写法（更优雅）

// 定义变量
$primary = #007bff
$danger = #dc3545

// 混合（Mixin）
btn-style(color)
  display inline-block
  padding 10px 20px
  font-size 16px
  color #fff
  background-color color
  border none
  border-radius 6px
  cursor pointer
  transition background-color 0.3s ease

  &:hover
    background-color darken(color, 15%)

// 使用
.btn
  &-primary
    btn-style($primary)
  &-danger
    btn-style($danger)

✅ 代码量减少 40%+
✅ 颜色、样式逻辑复用
✅ 支持函数 darken() 动态计算颜色
✅ 嵌套结构清晰，语义更强

🔍 关键差异总结

特性	CSS	Stylus
变量支持	❌（需 CSS Custom Props）	✅ `$primary = #007bff`
代码复用	❌（复制粘贴）	✅ Mixin + 函数
缩进/语法简洁度	❌ 需括号分号	✅ 无分号、无大括号
动态计算	❌（需 JS 或预计算）	✅ `darken($color, 15%)`
嵌套结构	❌（不支持）	✅ `&:hover`、`&-primary`

通过这个对比可以看出，Stylus 不仅让代码更简洁，还具备更强的编程能力，真正把 CSS 从“样式表”变成了“样式语言”。

🛠️ 快速上手 Stylus

1. 安装 Stylus

npm install -g stylus

2. 创建 `.styl` 文件

创建 style.styl 文件：

.card
  width 45px
  height 45px
  background #f0f0f0
  border-radius 8px

3. 编译成 CSS

stylus style.styl -o style.css

4. 实时监听（边写边编译）

stylus style.styl -o style.css -w

这样你在编辑 .styl 文件时，会自动实时生成对应的 .css 文件，开发体验丝滑流畅！

💡 小贴士：Stylus 的高级玩法

嵌套选择器：支持类似 Sass 的嵌套结构，提升语义清晰度。
函数支持：可以自定义函数进行计算或逻辑判断。
导入其他文件：通过 @import 模块化管理样式。
与构建工具集成：Webpack、Vite 等都支持 Stylus 插件。

🧩 与其他预处理器对比

特性	Stylus	Sass	Less
语法简洁	✅ 极简	✅ 简洁	⚠️ 较传统
变量支持	✅	✅	✅
Mixins	✅	✅	✅
嵌套	✅	✅	✅
函数支持	✅	✅	⚠️ 有限
学习成本	⭐⭐⭐⭐☆	⭐⭐⭐⭐⭐	⭐⭐⭐⭐☆

Stylus 的优势在于其极简语法和强大表达能力，尤其适合追求代码美感的开发者。

📌 总结

Stylus 是一款低调但极具潜力的 CSS 预处理器。它不仅能帮你写出更干净、可读性更强的代码，还能通过变量、Mixin 等特性大幅提升开发效率和代码可维护性。

如果你正在寻找一种比原生 CSS 更优雅、比 Sass 更自由的方案，不妨试试 Stylus —— 让你的样式代码也“文艺”一把！

📌 推荐场景：

个人项目快速搭建
组件库开发
原型设计阶段
喜欢简洁语法的开发者

✨ 动手试试吧：新建一个 .styl 文件，写点样式，然后运行 stylus -w，感受一下“边写边编译”的快感！

💬 如果你也有使用 Stylus 的经验，欢迎在评论区分享你的技巧或踩坑经历！

🚀 用 Stylus 写出更优雅的 CSS：提升开发效率的秘密武器