引言
你是否会觉得写 CSS 有时候特别繁琐，比如说，当你给每个按钮都设置相同的颜色或者边距时，却需要重复写上好多次。
现在，它来了它来了！Stylus带着更简洁的代码来了！
Stylus 作为一个功能强大的 CSS 预处理器，它可以通过简洁的语法和丰富的功能，让前端开发者能够更高效地编写样式代码。
一、Stylus 简介
1.1 什么是 Stylus？
Stylus 是一个预处理器，它允许开发者使用变量、嵌套、混合宏、函数等特性，最终编译为标准 CSS。
Stylus适用于大型项目，当你的CSS代码越复杂，你就越能感受到它语法的简洁，甚至可以省略大括号、分号和冒号，通过缩进和空格来定义代码块。
1.2 Stylus 的优势：
- 简洁的语法：无需大括号和分号，通过缩进表示层级。
- 动态功能：支持变量、函数、条件语句、循环等编程特性。
- 模块化：支持文件导入和作用域管理。
- 自动编译：通过命令行或构建工具（如 Webpack）实时编译。
二、安装与基本用法
2.1 安装 Stylus
Stylus 是一个基于 Node.js 的工具，所以在使用它之前，你需要先在你的电脑上安装好 Node.js 和 npm（Node 包管理器） 。
你可以前往 Node.js 官网下载并安装。
安装完成后，打开终端输入以下命令来检查是否已经成功安装 Node.js 和 npm：
node -v
npm -v
如果屏幕上显示了版本号（如 v18.0.0 和 8.0.0），说明 Node.js 和 npm 已经准备好了。
接下来，就可以使用 npm 来全局安装 Stylus：
npm install -g stylus
这条命令会将 Stylus 安装到你的系统中，这样你就可以在任意路径下使用 stylus 命令。
安装完成后，验证是否安装成功：
stylus --version
如果输出类似 stylus version 0.59.x，就表示 Stylus 已经成功安装！
2.2 基本语法示例
安装完成后，我们来尝试编写第一个 .styl 文件，并将其编译为标准的 CSS 文件。
步骤一：创建 Stylus 文件
首先，在你的项目文件夹中新建一个名为 common.styl 的文件。
在文件中写入以下代码：
Stylus
深色版本
// 定义变量
$background-color = #f0f0f0
// 嵌套写法
body
background $background-color
font-size 16px
.container
padding 20px
border 1px solid #ccc
这段代码定义了一个颜色变量 $background-color，然后通过缩进的方式实现了样式嵌套，结构清晰又简洁。
步骤二：编译为 CSS
接下来，我们需要将这个 .styl 文件转换成浏览器能识别的标准 CSS 文件。
在终端中进入你存放 common.styl 的目录，执行以下命令：
- stylus -w common.styl -o common.css
命令解析
-
stylus：这是启动 Stylus 编译器的命令。
-
-w：告诉 Stylus 监听指定的文件或目录的变化。如果检测到有修改（如保存更改），就会自动重新编译。
-
common.styl：这是你希望 Stylus 监听并编译的输入文件名。在这个例子中，Stylus 将监视
common.styl文件是否有任何改动。 -
-o：指定输出文件或目录。这里的
-o common.css表示将编译后的 CSS 输出到common.css文件中。
步骤三：查看编译结果
编译完成后，你会在相同目录下看到一个新生成的 common.css 文件，里面的内容如下：
body {
background: #f0f0f0;
font-size: 16px;
}
body .container {
padding: 20px;
border: 1px solid #ccc;
}
这就是从 Stylus 转换而来的标准 CSS 样式表，可以直接在 HTML 页面中引用。
三、Stylus 与 CSS 的对比
3.1. 变量声明与使用
Stylus 代码：
primary-color = #3498db
font-size = 16px
.button
background primary-color
font-size font-size
编译后的 CSS：
.button {
background: #3498db;
font-size: 16px;
}
说明：
- Stylus 使用
=定义变量，变量名无需$前缀。 - CSS 中变量会被直接替换为实际值，变量本身不会出现在最终文件中。
- 优势：变量可复用，修改一处即可全局生效。
3.2. 嵌套写法
Stylus 代码：
nav
ul
margin 0
padding 0
li
display inline-block
a
text-decoration none
编译后的 CSS：
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-decoration: none;
}
说明：
- Stylus 通过 缩进 表示层级关系，无需大括号
{}。 - CSS 中会生成完整的嵌套选择器，但层级关系不会被压缩。
- 优势：可以使代码更加简洁，让层级关系一目了然。
3.3. 混合宏
Stylus 代码：
// 定义混合宏
border-radius(radius)
-webkit-border-radius radius
-moz-border-radius radius
border-radius radius
// 使用混合宏
.button
border-radius 5px
编译后的 CSS：
.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
说明：
- Stylus 的混合宏类似于函数，它支持参数的传递。
- CSS 中会直接插入所有浏览器前缀的代码。
- 优势：可以减少重复代码，提升兼容性维护效率。
3.4. 函数调用
Stylus 代码：
// 定义函数：计算颜色变暗
darken(color, amount)
hsla(hue(color), saturation(color), lightness(color) - amount, alpha(color))
// 使用函数
.header
background darken(#ffffff, 10%)
编译后的 CSS：
.header {
background: hsla(0, 0%, 90%, 1);
}
说明：
- Stylus 支持动态计算颜色、数值等复杂逻辑。
- CSS 中会直接输出计算后的静态值。
- 优势：实现动态样式生成，无需手动计算。
四、Stylus 高级功能示例
4.1. 条件语句与循环
Stylus 代码：
// 条件语句
is-dark = true
if is-dark
body
background #000
color #fff
else
body
background #fff
color #000
// 循环生成类名
for i in 1..5
.item-{i}
width 20px * i
编译后的 CSS：
body {
background: #000;
color: #fff;
}
.item-1 {
width: 20px;
}
.item-2 {
width: 40px;
}
.item-3 {
width: 60px;
}
.item-4 {
width: 80px;
}
.item-5 {
width: 100px;
}
说明：
- Stylus 支持逻辑判断和动态类名生成。
- CSS 中会直接展开所有条件分支和循环结果。
- 优势：动态生成复杂样式，减少手动重复。
4.2. 模块化与文件导入
Stylus 代码：
// _variables.styl
primary-color = #e74c3c
// main.styl
@import 'variables'
.button
background primary-color
编译后的 CSS：
.button {
background: #e74c3c;
}
说明：
- Stylus 支持通过
@import导入其他文件，实现模块化开发。 - CSS 中会合并所有导入内容为一个文件。
- 优势：代码分层管理，提升可维护性。
五、总结
Stylus 通过简洁的语法和强大的功能，将 CSS 的编写从“静态描述”升级为“动态编程”。通过变量、嵌套、混合宏、函数等特性，开发者可以高效管理样式逻辑，同时保持代码的可读性和可维护性。
