跳到主要内容

Stylus

Stylus 的特点很鲜明：语法自由度高，写法可以非常短，也可以非常像 CSS。

也正因为太自由，它在团队协作里经常会出现两种完全不同的体验：

  • 写的人会觉得很顺
  • 接手的人不一定第一眼就舒服

所以现在看 Stylus，更适合带着两个目标：

  • 读懂历史项目
  • 理解它和 Less / SCSS 的差异

Stylus 的定位​

Stylus 更像一套“把语法束缚再放松一点”的预处理器。

它支持：

  • 不写大括号
  • 不写分号
  • 不写冒号
  • 条件、循环、函数、混入
  • 变量和运算

所以它的表达会非常灵活。

Stylus 最明显的特性​

1. 缩进式语法​

brandColor = #42b883

.card
  color brandColor
  padding 16px
  border-radius 12px

这就是 Stylus 最典型的样子。

如果团队里有人长期写 Python、Sass indented syntax 或早期 Vue 项目，这类写法通常会比较顺。

2. 也可以写得接近 CSS​

brandColor = #42b883;

.card {
  color: brandColor;
  padding: 16px;
}

所以 Stylus 的自由度很高，但项目一旦没有统一风格，文件之间就容易长得不太一样。

3. 变量​

brandColor = #42b883
radiusBase = 12px

Stylus 变量不需要 @ 或 $，这点和 Less、SCSS 很不一样。

4. 嵌套​

.nav
  display flex

  .item
    padding 8px 12px

    &:hover
      color brandColor

5. 混入​

flex-center()
  display flex
  align-items center
  justify-content center

.dialog
  flex-center()

6. 参数化混入​

button-size(height, paddingX)
  height height
  padding 0 paddingX

.button-sm
  button-size(32px, 12px)

7. 运算和函数​

baseGap = 8px

.grid
  gap baseGap * 2
  padding baseGap * 3
.button
  background brandColor

.button:hover
  background darken(brandColor, 10%)

8. 条件和循环​

for size in 1..4
  .mt-{size}
    margin-top size * 4px

这也是 Stylus 很灵活的一面。

在前端项目里怎么集成​

Vite​

pnpm add -D stylus

Vite 可以直接处理 .styl。

Webpack​

pnpm add -D stylus stylus-loader css-loader style-loader
module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: ['style-loader', 'css-loader', 'stylus-loader'],
      },
    ],
  },
}

Vue 项目​

<style lang="stylus" scoped>
.card
  padding 16px
  border-radius 12px

  .title
    font-weight 600
</style>

这类写法在一批 Vue 2 和早期 Vue 3 项目里还能看到。

Stylus 以前为什么受欢迎​

主要是这几件事：

  • 写得短
  • 写得快
  • 适合组件式样式文件
  • 在早期 Vue 生态里有一批稳定使用者

Stylus 现在为什么少了​

不是因为它功能不够，而是因为团队协作更强调：

  • 语法统一
  • 阅读一致性
  • 更低的接手成本

而 Stylus 的自由度，刚好会把这些事情变得更松。

再加上 SCSS 的生态更大，Tailwind 又在持续扩张，Stylus 在新项目里的默认优先级自然就更低了。

Stylus 的优点​

  • 语法简洁
  • 表达自由
  • 变量、混入、循环、函数都不弱
  • 读写速度快

Stylus 的局限​

  • 风格过于自由
  • 团队统一成本高
  • 生态热度不如 SCSS
  • 新项目里采用率已经明显下降

什么时候还值得看​

  • 接手老 Vue 项目
  • 维护历史样式文件
  • 需要读懂旧仓库里的 .styl 文件

和 Less、SCSS 的差别，先记住这几条​

  • Stylus 最自由
  • Less 和 SCSS 更接近 CSS
  • 团队协作时，Stylus 的可读性更依赖约定
  • 新项目里，Stylus 通常不会是第一选择