🎨 用 Stylus 写出更优雅、高效的 CSS

在现代前端开发中，CSS 虽然是样式层的基石，但其原生语法存在冗长、重复、缺乏逻辑抽象等问题。为了提升开发效率与代码可维护性，CSS 预处理器应运而生。Stylus 正是其中语法最简洁、表达力最强的一员。本文将带你深入理解 Stylus 的核心优势，并结合 Flex 布局、过渡动画、响应式设计等现代 CSS 技术，展示如何用 Stylus 编写出既高效又优雅的样式代码。

---

一、为什么选择 Stylus？

1.1 什么是 Stylus？

Stylus 是由 TJ Holowaychuk（Express.js 作者）开发的一款 CSS 预处理器。它支持变量、函数、混合（Mixins）、嵌套、条件判断、循环等编程特性，极大增强了 CSS 的“可编程性”。

⚠️ 注意：浏览器只能解析标准 CSS，因此 Stylus 文件需编译为 CSS后才能被使用。

1.2 安装与编译

通过 npm 全局安装 Stylus：

npm install -g stylus

编译单个文件：

stylus style.styl -o style.css

开启监听模式（边写边编译）：

stylus style.styl -o style.css -w

---

二、Stylus 的核心语法优势

2.1 极简语法：无需大括号和分号

Stylus 允许你省略 {} 和 ;，依靠缩进定义作用域：

// Stylus
.card
  width: 45px
  height: 45px
  background: #333

编译为 CSS：

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

💡 小贴士：虽然可以省略符号，但团队协作时建议保持一致风格。

---

2.2 变量与作用域

Stylus 支持变量定义，便于统一管理颜色、尺寸等常量：

$primary-color = #007bff
$card-size = 45px

.card
  width: $card-size
  height: $card-size
  background: $primary-color

变量具有作用域，支持局部覆盖，避免全局污染。

---

2.3 嵌套：结构清晰，逻辑分明

Stylus 支持选择器嵌套，让代码结构更贴近 HTML 层级：

.panel
  display: flex
  padding: 16px
  
  &.active
    background: #e9ecef
  
  .title
    font-weight: bold
  
  .icon
    margin-right: 8px
    &:hover
      opacity: 0.8

编译后：

.panel {
  display: flex;
  padding: 16px;
}
.panel.active {
  background: #e9ecef;
}
.panel .title {
  font-weight: bold;
}
.panel .icon {
  margin-right: 8px;
}
.panel .icon:hover {
  opacity: 0.8;
}

✅ & 表示父选择器，常用于状态类（如 .active、:hover）。

---

2.4 Mixins（混合）：复用逻辑块

类似函数，可封装常用样式：

// 定义 mixin
clearfix()
  &:after
    content: ""
    display: table
    clear: both

.container
  clearfix()

支持传参：

border-radius($radius = 4px)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius

.button
  border-radius(8px)

🌟 Stylus 还能自动添加浏览器前缀（配合 autoprefixer 插件更佳）。

---

三、结合现代 CSS 技术：Flex + Transition + Media Query

3.1 弹性布局（Flexbox）—— 移动端布局利器

Stylus 让 Flex 布局更简洁：

.row
  display: flex
  justify-content: space-between  // 主轴对齐
  align-items: center            // 侧轴对齐

.item
  flex: 1  // 等比例分配剩余空间

若方向为纵向：

.column
  display: flex
  flex-direction: column
  justify-content: flex-start
  align-items: stretch

💡 flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0% 的简写，常用于自适应布局。

---

3.2 过渡动画（Transition）—— 平滑交互体验

Stylus 中写过渡更直观：

.card
  opacity: 1
  transition: all 300ms ease-in-out

  &:hover
    opacity: 0.7
    transform: translateY(-2px)

也可以精细控制：

.fade-in
  transition: opacity 500ms ease-in 100ms  // 属性 时间 函数 延迟

⏱️ transition-delay 可用于实现“逐个入场”效果，提升 UI 动感。

---

3.3 响应式设计：媒体查询（Media Query）

Stylus 支持将媒体查询嵌套在选择器内，逻辑更集中：

.card
  width: 200px
  padding: 16px

  @media (max-width: 480px)
    width: 100%
    padding: 12px

也可定义断点变量：

$mobile = 480px
$tablet = 768px

.sidebar
  display: block

  @media (max-width: $mobile)
    display: none

📱 iPhone SE/8 等设备宽度为 375px 或 414px，max-width: 480px 能覆盖绝大多数手机。

---

四、实战：用 Stylus 构建一个响应式卡片组件

// variables.styl
$primary = #007bff
$gray = #6c757d
$border-radius = 8px
$spacing = 16px

// card.styl
@import 'variables'

.card
  background: white
  border-radius: $border-radius
  box-shadow: 0 2px 8px rgba(0,0,0,0.1)
  padding: $spacing
  transition: transform 200ms ease, box-shadow 200ms ease

  &:hover
    transform: translateY(-4px)
    box-shadow: 0 4px 16px rgba(0,0,0,0.15)

  .header
    display: flex
    align-items: center
    margin-bottom: $spacing

    .avatar
      width: 40px
      height: 40px
      border-radius: 50%
      margin-right: $spacing / 2

    .title
      font-size: 18px
      color: $primary

  .content
    color: $gray
    line-height: 1.5

  // 响应式
  @media (max-width: 480px)
    padding: $spacing / 2

    .header
      flex-direction: column
      align-items: flex-start

      .avatar
        margin-bottom: 8px

这段代码展示了：

• 变量统一管理
• 嵌套结构清晰
• Hover 交互动画
• 移动端布局适配

---

五、Stylus vs Sass vs Less

特性	Stylus	Sass	Less
语法简洁度	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐
嵌套	✅	✅	✅
Mixin	✅（无括号调用）	✅（需 @include）	✅（类似函数）
条件/循环	✅	✅	❌（有限）
社区生态	中等	⭐⭐⭐⭐⭐	⭐⭐⭐⭐

💬 如果你追求极致简洁和编程自由度，Stylus 是不二之选。

---

六、总结

Stylus 不仅是一门预处理器，更是一种提升 CSS 工程化能力的思维方式。它通过：

• 极简语法减少视觉噪音
• 嵌套与作用域提升结构清晰度
• Mixin 与变量增强复用性
• 无缝集成现代 CSS 特性（Flex、Transition、Media Query）

让你从“写样式”升级为“构建样式系统”。

虽然如今 PostCSS + Tailwind CSS 等方案流行，但在需要高度定制化样式的项目中，Stylus 依然是高效、优雅的利器。

🚀 建议：在小型项目或个人作品中大胆尝试 Stylus；大型项目可结合构建工具（如 Webpack + stylus-loader）集成。

---

最后提醒：无论使用何种预处理器，语义化、可维护、性能优化才是 CSS 的终极目标。工具只是手段，思维才是核心。

---