Stylus：CSS 预处理语言的革新者
在前端开发的世界里，CSS 作为网页样式的塑造者，一直扮演着至关重要的角色。然而，随着项目规模的不断扩大，传统 CSS 在编写和维护上的局限性逐渐显露。正是在这样的背景下，CSS 预处理语言应运而生，其中，Stylus 以其独特的魅力，吸引了众多开发者的目光。
一、Stylus 是什么
-
核心定义
Stylus 是一款高性能 CSS 预处理语言，通过简洁语法和编程特性（如变量、函数、作用域）大幅提升样式开发效率。
-
与 CSS 的关系
-
超集特性：完全兼容原生 CSS 语法，支持无缝迁移
-
编译依赖：需通过工具编译为标准 CSS 才能被浏览器解析
-
扩展能力：提供缩进语法、动态表达式等 CSS 不具备的高级特性
-
二、Stylus 的安装
前置条件：已安装 Node.js（建议 v14+）
# 全局安装命令
npm install -g stylus
# 验证安装成功
stylus --version
三、Stylus 的编译
命令行编译核心参数
stylus -w ./source.styl -o ./dist/style.css
| 参数 | 功能描述 | 使用场景 |
|---|---|---|
-w | 监听文件变化并自动编译 | 开发环境实时预览 |
-o | 指定输出文件路径 | 生产环境构建 |
-c | 压缩输出 CSS | 优化线上资源体积 |
-m | 生成 Source Map | 调试复杂样式问题 |
进阶使用技巧
-
多文件编译：
stylus -w ./styles/*.styl -o ./public/css/ -
监听目录变化：
stylus -w ./src/ -o ./dist/ --include-css
四、Stylus 的核心特性
1. 模块化开发
-
文件拆分：按组件 / 功能组织样式文件
-
导入机制：通过
@import整合分散的样式// 示例：导入公共变量 @import 'variables' // 使用导入的变量 .header color primary-color -
命名空间：避免全局样式污染，提升代码可维护性
2. 缩进语法与智能前缀
-
无分号 / 花括号：通过缩进表达代码块层级
-
自动前缀：基于 Can I Use 数据自动添加浏览器前缀
-
语法糖：支持逗号分隔值、数学表达式等简化写法
// 原始 Stylus 代码
button
display flex
justify-content center
border-radius 4px
// 编译后 CSS
button {
display: flex;
webkit-justify-content: center;
justify-content: center;
border-radius: 4px;
}
3. 变量与作用域系统
-
动态变量：支持字符串、数值、颜色等多种类型
-
局部作用域：变量在选择器 / 函数内部定义时仅局部生效
-
响应式设计：结合媒体查询实现变量动态切换
// 基础变量定义
primary-color = #3498db
base-font-size = 16px
// 局部变量示例
.container
font-size base-font-size
mobile-font = base-font-size \* 0.9
@media (max-width: 768px)
font-size mobile-font
