Stylus预处理器完整语法与项目实战详细代码案例

Stylus 是一款让人用过就再也回不去的 CSS 预处理器——它去掉了大量冗余符号，变量、嵌套、混合宏、函数、条件判断、循环等高级功能一应俱全，核心目标就是让你的样式编写更高效、更畅快。接下来我们将 Stylus 的核心语法从头到尾系统梳理，并附上一套可直接编译运行的实战完整代码，无论是前端 Vue 项目还是纯静态页面都能直接套用。

一、文档简介

Stylus 是一款简洁而强大的 CSS 预处理器，通过舍弃大量冗余符号，支持变量、嵌套、混合、函数、条件判断、循环等高级特性，极大简化了样式开发流程。本文全面梳理 Stylus 核心语法，并提供一套可直接编译运行的完整实战代码，适用于前端 Vue、静态页面等常见项目场景。

二、环境快速搭建

1. 全局安装依赖

npm install stylus stylus-loader -g

2. 编译命令

# 单文件编译
stylus index.styl -o index.css
# 监听文件自动编译
stylus -w index.styl -o index.css

三、基础语法代码演示

3.1 变量与运算符

Stylus 最突出的特点就是极简——无需分号、大括号，甚至连冒号都可以省略，书写体验十分清爽。下面这段代码展示了变量定义和基础数学运算的用法：

// 定义变量
primary-color = #2563eb
font-size-base = 14px
spacing = 8px
// 运算
box-padding = spacing * 2
border-radius = spacing / 2

.card
  color primary-color
  font-size font-size-base
  padding box-padding
  border-radius border-radius

编译后得到标准的 CSS：

.card {
  color: #2563eb;
  font-size: 14px;
  padding: 16px;
  border-radius: 4px;
}

3.2 选择器嵌套 & 父级引用&

通过嵌套写法，你再也不用为样式层级关系而烦恼；父级引用符 & 则让伪类、修饰符的处理变得异常顺手：

.na v
  height 60px
  background #fff
  a
    display inline-block
    padding 0 12px
    color #333
    &:hover
      color primary-color
  &.dark
    background #1a1a1a
    a
      color #fff

3.3 Mixin 混合宏（复用样式）

Mixin 相当于一组样式的模板，支持参数传递，调用后即可轻松复用，有效减少重复代码：

// 通用圆角阴影混合
card-shadow(radius = 6px)
  border-radius radius
  box-shadow 0 2px 12px rgba(0,0,0,0.08)

// 调用
.goods-card
  card-shadow(10px)
  padding 16px

3.4 函数与条件判断

Stylus 支持自定义函数，配合条件判断可以更灵活地控制样式输出逻辑：

// 颜色变暗函数
darken(color, num)
  rgba(color, num)

// 条件判断
bg-type = dark
.box
  if bg-type == dark
    background #222
    color #fff
  else
    background #f5f5f5
    color #333

3.5 for 循环批量样式

循环在生成规律性类名或间距值时特别实用，比手工编写节省大量时间：

// 循环生成间距类
for i in 1..6
  .mt-{i}
    margin-top i * 4px

四、综合实战完整案例

以下是一份完整的 index.styl 文件，涵盖了变量、混合宏、嵌套等常见用法，直接运行即可生成生产级 CSS：

// 全局变量
theme-blue = #1677ff
text-gray = #666
base-space = 10px

// 混合
flex-center()
  display flex
  justify-content center
  align-items center

// 页面容器
.page-wrap
  width 1200px
  margin 0 auto
  padding base-space * 2

  .title
    font-size 20px
    color theme-blue
    margin-bottom base-space

  .list-item
    flex-center()
    height 80px
    border 1px solid #eee
    margin-bottom base-space

    .desc
      color text-gray
      margin-left base-space

编译后的核心 CSS 片段如下：

.page-wrap {
  width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.page-wrap .title {
  font-size: 20px;
  color: #1677ff;
  margin-bottom: 10px;
}
.page-wrap .list-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  border: 1px solid #eee;
  margin-bottom: 10px;
}
.page-wrap .list-item .desc {
  color: #666;
  margin-left: 10px;
}

五、项目使用注意事项

• 原生 CSS 兼容：如果你仍习惯使用分号、大括号，Stylus 完全兼容这两种写法，可以混合使用，过渡期毫无压力。
• 工程化适配：在 Vue/Webpack 项目中只需安装 stylus-loader，然后在