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

一、文档简介

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

二、环境快速搭建

1. 全局安装依赖

bash 复制代码

npm install stylus stylus-loader -g

2. 编译命令

bash 复制代码

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

三、基础语法代码演示

3.1 变量与运算符

Stylus 无需分号、大括号、冒号，书写极简。

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：

css 复制代码

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

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

stylus 复制代码

.nav
  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 混合宏（复用样式）

stylus 复制代码

// 通用圆角阴影混合
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 循环批量样式

stylus 复制代码

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

四、综合实战完整案例

index.styl

stylus 复制代码

// 全局变量
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片段：

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 后，直接在 <style lang="stylus"> 内编写；
性能优化：大量循环代码建议编译时生成静态CSS，避免运行时计算；
变量作用域：块内变量仅当前选择器生效，全局变量统一写在文件顶部管理。

海量精选技术文档和实战案例持续更新，敬请关注【风骏时光少年】