Stylus

2010年由TJ为Node.js生态创建的CSS预处理器，以极简缩进语法、可选括号分号、内置Mixin与函数系统为核心，编译输出标准CSS，与Sass/Less形成差异化竞争。

核心语法特性：能省略到什么程度

Stylus允许开发者完全省略大括号、分号和冒号，仅靠缩进划分层级。官网示例显示，标准CSS中的`body { font: 12px Helvetica, Arial, sans-serif; }`可简化为`body font: 12px Helvetica, Arial, sans-serif`；进一步省略分号后，同一段代码可写作`body font: 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius: 5px -moz-border-radius: 5px border-radius: 5px`。这种设计使代码体积显著缩小，同时保持可读性。

• 缩进语法：用缩进代替大括号，无需分号冒号
• 变量赋值：使用`=`而非`$`或`@`，如`main-color = #006`
• Mixin定义：直接写函数名加参数，无需`@mixin`或`.mixin()`，如`pad(x, y) padding: y x`
• 透明Mixin：Mixin可像属性一样直接调用，如`border-radius: 5px`自动匹配同名Mixin

与Sass/Less的对比差异

官网专门设立对比页面，展示三者在变量、Mixin、复杂示例上的语法差异。变量方面，Stylus用`main-color = #006`，Sass用`$main-color: #006`，Less用`@main-color: #006`。Mixin方面，Stylus直接写`pad(x, y) padding: y x`并调用`pad(5px, 10px)`，Sass需`@mixin pad($x, $y)`配合`@include`，Less则用`.pad(@x, @y)`配合`.pad(5px, 10px)`。复杂示例中，Stylus的`box-shadow`Mixin可省略`@mixin`和`@include`关键字，代码更简洁。

• 变量语法：Stylus用`=`赋值，Sass用`$`，Less用`@`
• Mixin调用：Stylus直接写函数名，Sass需`@include`，Less需类选择器调用
• 默认参数：Stylus支持`pad(x=5px)`形式，与Sass/Less类似但无额外关键字
• 兼容性：Stylus文件可直接写入标准CSS代码，无需转换语法

CLI工具与生态集成

Stylus自带`stylus`命令行工具，支持将`.styl`文件编译为CSS，并提供交互式REPL（`-i`参数）、文件监听（`-w`）、压缩输出（`-c`）、SourceMap生成（`-m`）等功能。可通过`-u`参数加载插件（如nib扩展），`-U`启用图片内联为Data URI。安装方式为`npm install stylus -g`或`pnpm add -g stylus`。IDE方面，VSCode需安装Stylus扩展，WebStorm内置支持。

• 命令行编译：`stylus style.styl style.css`
• 交互式REPL：`stylus -i`进入实时测试环境
• 文件监听：`stylus -w`自动重编译
• CSS转Stylus：`stylus --css src.css dest.styl`
• 插件系统：通过`-u`加载nib等第三方插件，扩展CSS3前缀等功能

动态编程能力：条件、循环与内置函数

Stylus支持条件判断（`if/else`）、循环（`for`）、哈希（类似对象）和迭代，可在样式文件中编写逻辑。内置函数涵盖颜色操作（如`saturate`、`lighten`）、数学运算、类型检查等。官网文档列出完整内置函数列表，并支持自定义函数和关键字参数（`keyword arguments`）。此外，`@extend`、`@block`、`@import`等At规则允许模块化组织代码。

• 条件判断：`if color == #fff`控制样式分支
• 循环：`for num in 1..5`生成重复样式
• 哈希：`colors = {primary: #06c, secondary: #ccc}`
• 内置函数：`darken(color, 20%)`、`unit(14px, 'em')`等
• 关键字参数：`border-radius(5px, 10px)`可指定参数名

中文资源与社区支持

官网提供中文版页面（由张鑫旭翻译），并设有独立中文站点`stylus.nodejs.cn`。第三方教程（如掘金文章）覆盖从安装到响应式面板实战的完整流程，包含变量、Mixin、嵌套等特性的代码示例。GitHub仓库由TJ创建，当前维护者为iChenLei和Stylus贡献者，遵循MIT协议。

• 中文官网：`stylus.nodejs.cn`提供完整文档翻译
• 社区教程：掘金等平台有零基础实战指南
• 维护团队：TJ（创始人）、iChenLei（当前维护者）
• 许可协议：MIT，可自由商用

常见问题

Q1：Stylus的缩进语法必须用吗？能否写标准CSS？

A1：官网明确说明缩进语法是可选的：开发者可以在.styl文件中直接写标准CSS代码（带大括号和分号），Stylus完全兼容。这种设计降低了学习门槛，允许团队逐步迁移。

Q2：Stylus的Mixin和Sass的@mixin有何本质区别？

A2：Stylus的Mixin本质上是函数，定义时无需`@mixin`关键字，调用时直接写函数名加参数即可（如`pad(5px, 10px)`）。Sass的Mixin需要`@mixin`定义和`@include`调用，语法更冗长。此外，Stylus支持“透明Mixin”——当Mixin名称与CSS属性名相同时，可直接用属性赋值语法调用（如`border-radius: 5px`自动触发同名Mixin）。

Q3：Stylus如何处理浏览器前缀？需要手动写吗？

A3：Stylus本身不自动添加浏览器前缀，但可通过nib插件（`-u nib`）扩展CSS3支持。nib提供`border-radius`、`box-shadow`等属性的跨浏览器前缀版本，开发者只需调用Mixin即可。官网文档也列出`@keyframes`、`@font-face`等At规则的完整支持。

更多同类工具与网站,可在预编译工具分类继续挑选。

信息核实于 2026年7月,具体以官网为准。