Stylus CSS 预处理器

Stylus 是什么？

Stylus 是一种富有表现力、动态且健壮的 CSS 预处理器。它由 Node.js 驱动，采用极简语法，让你可以用更少的代码写出更强大的样式表。与 Sass 和 Less 相比，Stylus 更加灵活——你可以选择省略大括号、冒号和分号，也可以保留标准的 CSS 写法。

核心优势：

• 高度灵活，支持缩进语法与 CSS 原生语法自由切换
• 强大的内置函数库，涵盖颜色计算、数学运算、工具方法等
• 完善的变量、混合（Mixin）、函数、继承机制
• 可编程特性，支持条件判断和迭代循环
• 活跃的社区和丰富的插件生态

安装与初次使用

Stylus 通过 npm 安装，同时支持命令行和编程式调用。

安装命令

npm install stylus -g

命令行编译

将 main.styl 编译为 main.css：

stylus main.styl

实时监听文件变化并自动编译：

stylus -w main.styl

压缩输出：

stylus -c main.styl

在项目中引入

const stylus = require('stylus');

stylus.render(`
  body
    color red
`, (err, css) => {
  if (err) throw err;
  console.log(css);
});

基本语法规则

Stylus 接受三种书写方式，你可以根据团队规范自由选择：

完全省略大括号和冒号（缩进语法）

body
  color #333
  font-size 16px
  h1
    color red

保留冒号，省略大括号

body
  color: #333
  font-size: 16px
  h1
    color: red

完全使用 CSS 标准写法

body {
  color: #333;
  font-size: 16px;
}
body h1 {
  color: red;
}

建议： 学习时使用缩进语法以感受 Stylus 的极简风格，实际项目中建议统一风格。

变量

变量以 $ 或直接使用标识符定义，推荐使用 $ 以增强可读性。

// 定义变量
$primary-color = #42b883
$base-font = 16px

// 使用变量
body
  font-size $base-font
  color $primary-color

变量不仅限于简单值，还可以存储整个样式块：

$border-style = 1px solid #ccc

.card
  border $border-style
  padding 20px

混合（Mixin）

混合用于封装可复用的样式规则，可以带参数，也可以不带参数。

无参混合

box-shadow()
  -webkit-box-shadow 0 2px 4px rgba(0,0,0,0.1)
  box-shadow 0 2px 4px rgba(0,0,0,0.1)

.modal
  width 300px
  box-shadow()

带参数的混合

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

.button
  border-radius(5px)
  background blue

参数默认值

flex-center($direction = row, $justify = center, $align = center)
  display flex
  flex-direction $direction
  justify-content $justify
  align-items $align

.container
  flex-center()                 // 使用全部默认值
  flex-center(column)           // 覆盖 $direction
  flex-center(row, flex-start)  // 覆盖 $direction 和 $justify

函数

Stylus 允许你定义自定义函数，进行数据处理或计算。

// 自定义函数：将 px 转成 rem（基准 16px）
px-to-rem($px)
  unit($px / 16, 'rem')

// 使用
.title
  font-size px-to-rem(24)  // => font-size: 1.5rem
  margin px-to-rem(8)      // => margin: 0.5rem

内置函数极其丰富，例如：

lighten(#42b883, 20%)   // 调亮颜色
darken(#42b883, 20%)    // 调暗颜色
rgba(#42b883, 0.5)      // 添加透明度
round(3.1415)           // 四舍五入 => 3

嵌套规则

Stylus 支持嵌套书写父子选择器，并使用 & 引用父级选择器。

.nav
  background #222
  padding 10px
  a
    color white
    text-decoration none
    &:hover
      color #42b883
  .active
    font-weight bold

编译后的 CSS：

.nav {
  background: #222;
  padding: 10px;
}
.nav a {
  color: #fff;
  text-decoration: none;
}
.nav a:hover {
  color: #42b883;
}
.nav .active {
  font-weight: bold;
}

继承（@extend）

使用 @extend 可以复用选择器的全部样式，避免重复代码。

.message
  padding 15px
  border 1px solid transparent
  border-radius 4px

.success
  @extend .message
  border-color #4caf50
  background #e8f5e9

.error
  @extend .message
  border-color #f44336
  background #ffebee

编译后，.message 的样式会被分组共享，输出更高效的 CSS。

运算

Stylus 可在样式中直接进行数学运算，自动处理单位。

$width = 100%

.sidebar
  width $width / 4      // 25%
  float left

.main
  width $width * 3 / 4  // 75%
  float right

// 混合同类型单位
.box
  padding 10px + 5    // => 15px
  margin 20px - 10px  // => 10px (同类型单位运算后保留 px)

// 颜色运算
.button
  background #42b883 + #001100   // 通道叠加 #43c983
  color #fff - rgba(#000, 0.3)  // 减淡颜色

条件与循环

Stylus 内置 if / unless 条件和 for / each 循环，让样式更具编程逻辑。

条件语句

$theme = 'dark'

body
  if $theme == 'dark'
    background #121212
    color #eee
  else
    background #fff
    color #333

循环生成网格

// 生成 col-1 到 col-12
for $i in 1..12
  .col-{$i}
    width ($i * 100% / 12)

// 等价迭代
$items = (home about contact)
for $item in $items
  .icon-{$item}
    background-image url('/icons/' + $item + '.png')

导入与模块化

使用 @import 拆分样式文件，编译时会将多个 .styl 合并成一个 CSS。

目录结构示例：

styles/
  main.styl
  _variables.styl
  _mixins.styl
  _header.styl
  _footer.styl

main.styl：

@import 'variables'
@import 'mixins'
@import 'header'
@import 'footer'

导入时默认包含 .styl 扩展名，可省略。

实战案例：构建一个响应式卡片组件

以下示例综合运用变量、混合、嵌套、函数和循环。

// _variables.styl
$card-bg = #fff
$card-radius = 8px
$base-shadow = 0 2px 8px rgba(0,0,0,0.1)
$breakpoints = {
  sm: 576px,
  md: 768px,
  lg: 992px
}

// _mixins.styl
respond-to($bp)
  if $breakpoints[$bp]
    @media (min-width: $breakpoints[$bp])
      {block}

// card.styl
.card
  background $card-bg
  border-radius $card-radius
  box-shadow $base-shadow
  padding 20px
  margin-bottom 20px
  +respond-to('md')
    padding 30px
    display flex
    gap 20px

.card-image
  width 100%
  height auto
  border-radius $card-radius
  +respond-to('md')
    width 40%

.card-content
  +respond-to('md')
    width 60%

.card-title
  font-size 1.25rem
  margin-bottom 10px
  color darken(#42b883, 10%)

.card-description
  line-height 1.6
  color #666

与 Sass / Less 简要对比

进阶学习路径

• 掌握 Stylus 内置函数大全（数学、颜色、字符串、列表等）
• 学习使用 Nib（Stylus 官方插件库）快速获得大量预设混合
• 结合构建工具（Webpack / Vite）配置 Stylus-loader 或 vite-plugin-stylus
• 探索 Stylus 插件开发，满足团队定制需求

总结

Stylus 是一款兼具极简美学与强大编程能力的 CSS 预处理器。它为开发者提供了极高的书写自由度，同时内置了变量、混合、函数、运算、继承等现代工具。无论是个人项目还是团队协作，只要统一代码风格，Stylus 都能显著提升 CSS 开发效率与维护性。

立即尝试：

npm install stylus -g
stylus -w style.styl -o style.css

开启你的极简样式之旅。