1. Stylus 是什么？为什么需要 CSS 预处理器？
在前端开发中，CSS 作为样式描述语言已经存在了二十多年。随着前端项目越来越复杂，原生 CSS 的局限性逐渐暴露：缺乏变量、嵌套、函数等编程特性，导致代码冗余、难以维护。这就是 CSS 预处理器诞生的背景。
Stylus 是三大主流 CSS 预处理器之一（另外两个是 Sass 和 Less），它通过扩展 CSS 语法，提供了变量、嵌套、混合（Mixins）、函数等高级特性，最终编译成浏览器可识别的原生 CSS。这种"写更少代码，做更多事情"的理念，特别适合现代前端开发。
提示：预处理器的核心价值不在于减少代码量（虽然确实能做到），而在于提升代码的可维护性和开发效率。当项目规模达到一定程度后，这种优势会愈发明显。
2. Stylus 核心功能深度解析
2.1 极简语法设计
Stylus 最显著的特点是其灵活的语法规则。与 Sass 和 Less 不同，它允许开发者完全省略大括号、分号和冒号：
stylus复制// 传统 CSS
.button {
color: #1890ff;
font-size: 14px;
}
// Stylus 等效写法
.button
color #1890ff
font-size 14px
这种语法看起来像 Python 或 Ruby 的风格，减少了视觉干扰，让开发者更专注于样式逻辑本身。但要注意：
- 缩进必须一致（建议 2 或 4 个空格）
- 属性名和值之间至少有一个空格
- 嵌套层级通过缩进表示
2.2 变量系统
变量是预处理器最基础也最实用的功能。Stylus 的变量定义极其简单：
stylus复制// 定义变量
primary-color = #1890ff
secondary-color = #f5222d
base-padding = 16px
// 使用变量
.header
background primary-color
padding base-padding
变量的优势在于：
- 统一管理常用值（如主题色、间距等）
- 修改时只需改动一处，避免全局搜索替换
- 配合条件语句可以实现主题切换等高级功能
注意：Stylus 变量是动态作用域的，这意味着它们可以在任何地方被重新定义，使用时要注意避免意外覆盖。
2.3 嵌套规则
嵌套是解决 CSS 选择器重复问题的利器。Stylus 的嵌套语法让层级关系一目了然：
stylus复制.nav
height 50px
ul
list-style none
li
float left
a
display block
padding 0 10px
&:hover // & 表示父选择器
color red
编译后会生成：
css复制.nav {
height: 50px;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: left;
}
.nav ul li a {
display: block;
padding: 0 10px;
}
.nav ul li a:hover {
color: red;
}
嵌套虽然方便，但也要避免过度嵌套（一般不超过 4 层），否则会导致生成的 CSS 选择器过于具体，影响性能。
2.4 混合（Mixins）与函数
混合（Mixins）是 Stylus 中代码复用的核心机制，可以理解为"可重用的样式块"：
stylus复制// 定义混合
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n
// 使用混合
.button
border-radius(5px)
Stylus 还内置了大量实用函数：
stylus复制// 颜色函数
primary-color = #1890ff
.button
background primary-color
&:hover
background lighten(primary-color, 10%) // 颜色变亮10%
&:active
background darken(primary-color, 10%) // 颜色变暗10%
其他常用函数包括：
unit(value, unit)- 添加单位percentage(value)- 转换为百分比floor(n)/ceil(n)- 取整
3. Stylus 完整开发流程
3.1 环境配置
现代前端项目通常使用构建工具（如 Webpack 或 Vite）配合 Stylus。以 Vite + Vue 项目为例：
bash复制# 创建Vue项目
npm create vite@latest my-project -- --template vue
cd my-project
# 安装Stylus相关依赖
npm install stylus stylus-loader -D
Vite 对 Stylus 有开箱即用的支持，无需额外配置。如果是 Webpack 项目，需要在 webpack.config.js 中添加 loader 配置：
javascript复制module.exports = {
module: {
rules: [
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
}
]
}
}
3.2 文件组织建议
良好的文件结构能大幅提升样式可维护性：
code复制src/
styles/
variables.styl # 全局变量
mixins.styl # 全局混合
reset.styl # 重置样式
components/ # 组件样式
button.styl
form.styl
pages/ # 页面样式
home.styl
about.styl
3.3 实际开发示例
全局样式定义
stylus复制// variables.styl
// 颜色
$primary-color = #1890ff
$success-color = #52c41a
$warning-color = #faad14
$error-color = #f5222d
// 间距
$space-small = 8px
$space-medium = 16px
$space-large = 24px
// 字体
$font-family = -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
$font-size-base = 14px
组件样式开发
stylus复制// button.styl
@import '../variables'
.button
display inline-block
padding $space-small $space-medium
font-family $font-family
font-size $font-size-base
border-radius 4px
cursor pointer
transition all 0.3s
&-primary
background $primary-color
color white
&:hover
background darken($primary-color, 10%)
&-dashed
border 1px dashed #d9d9d9
background transparent
&[disabled]
opacity 0.5
cursor not-allowed
Vue 单文件组件中使用
vue复制<template>
<button class="button button-primary">
<slot></slot>
</button>
</template>
<script>
export default {
name: 'MyButton'
}
</script>
<style lang="stylus" scoped>
@import '../styles/variables'
.button
&-primary
&:hover
box-shadow 0 2px 8px rgba($primary-color, 0.3)
</style>
4. 高级特性与技巧
4.1 条件与循环
Stylus 支持类似编程语言的条件和循环语句：
stylus复制// 条件语句
theme = dark
body
if theme == dark
background #000
color #fff
else
background #fff
color #333
// 循环生成工具类
for size in (small medium large)
.margin-{size}
margin lookup('$space-' + size)
4.2 继承与扩展
@extend 指令可以让一个选择器继承另一个选择器的样式：
stylus复制.error
color #f5222d
font-size 12px
.input-error
@extend .error
border 1px solid #f5222d
4.3 自定义函数
可以定义自己的实用函数：
stylus复制// 将px转换为rem（假设基准为16px）
px2rem(px)
unit(px / 16, 'rem')
body
font-size px2rem(14) // 输出: font-size: 0.875rem;
4.4 与 JavaScript 交互
虽然 Stylus 本身是用 JavaScript 实现的，但在样式文件中直接使用 JavaScript 功能有限。不过可以通过以下方式交互：
- 在构建时通过插件注入 JavaScript 变量
- 使用
@require引入 JSON 数据 - 通过 CLI 传递参数
5. 性能优化与最佳实践
5.1 编译优化
-
压缩输出：在生产环境启用 CSS 压缩
bash复制
stylus --compress style.styl -
Source Maps：方便调试
bash复制
stylus --sourcemap style.styl -
增量编译：只重新编译修改过的文件
bash复制
stylus --watch styles/ --out dist/
5.2 代码组织建议
- 变量命名：使用有意义的名称，如
$primary-color而非$color1 - 避免深层嵌套：一般不超过 4 层
- 模块化：按功能拆分样式文件
- 注释规范：重要的变量和混合要添加注释
5.3 常见问题解决
-
样式不生效：
- 检查文件路径是否正确
- 确认构建工具配置正确
- 查看是否有语法错误
-
变量未定义：
- 检查变量作用域
- 确保文件引入顺序正确
-
编译速度慢：
- 减少
@import嵌套 - 使用
--watch模式
- 减少
6. 与其他预处理器的对比
| 特性 | Stylus | Sass/SCSS | Less |
|---|---|---|---|
| 语法灵活性 | 最高 | 中等 | 最低 |
| 学习曲线 | 中等 | 较高 | 较低 |
| 功能完整性 | 高 | 最高 | 中等 |
| 性能 | 快 | 中等 | 快 |
| 社区生态 | 中等 | 最丰富 | 丰富 |
选择建议：
- 需要最大灵活性：Stylus
- 需要成熟生态：Sass
- 需要低学习成本：Less
7. 实战技巧分享
7.1 响应式设计方案
stylus复制// 断点变量
$breakpoints = {
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
}
// 响应式混合
responsive(breakpoint)
@media (min-width: $breakpoints[breakpoint])
{block}
// 使用示例
.container
width 100%
+responsive(md)
width 750px
+responsive(lg)
width 970px
7.2 主题切换实现
stylus复制// 定义主题
themes = {
light: {
bg: #fff,
text: #333,
primary: #1890ff
},
dark: {
bg: #000,
text: #eee,
primary: #096dd9
}
}
// 主题应用函数
apply-theme(theme)
body
background theme.bg
color theme.text
.button
background theme.primary
// 使用
body
apply-theme(themes.light)
.dark-mode
apply-theme(themes.dark)
7.3 BEM 命名规范支持
stylus复制// BEM 混合
b(block)
.{block}
{block}
e(element)
&__{element}
{block}
m(modifier)
&--{modifier}
{block}
// 使用示例
+b(button)
display inline-block
+e(icon)
margin-right 5px
+m(primary)
background blue
8. 现代替代方案探讨
虽然 Stylus 仍然可用，但现代 CSS 生态已经出现了新的解决方案：
- CSS Modules：解决作用域问题
- CSS-in-JS：如 styled-components
- PostCSS：通过插件扩展 CSS 功能
- 原生 CSS 变量：
var(--primary-color)
这些方案各有优劣，选择时应考虑：
- 项目规模
- 团队熟悉度
- 长期维护成本
对于新项目，建议评估 CSS Modules + PostCSS 的组合，它们提供了类似预处理器的功能，同时更贴近现代 CSS 标准。