Stylus初体验：从入门到深入详解

引言

Stylus 是一个功能强大的 CSS 预处理器，它通过简洁的语法和丰富的功能，让前端开发者能够更高效地编写样式代码。

本文将从基础到高级逐步讲解 Stylus 的使用方法，并结合实际案例帮助你掌握其核心特性。

一、Stylus 简介

1.1 什么是 Stylus？

Stylus 是一个类似 Sass/Less 的 CSS 预处理器，它允许开发者使用变量、嵌套、混合宏（Mixins）、函数等特性，最终编译为标准 CSS。它的语法更加简洁，甚至可以省略大括号、分号和冒号，通过缩进和空格来定义代码块。

1.2 Stylus 的优势有哪些？

简洁的语法：无需大括号和分号，通过缩进表示层级。
动态功能：支持变量、函数、条件语句、循环等编程特性。
模块化：支持文件导入和作用域管理。
自动编译：通过命令行或构建工具（如 Webpack）实时编译。

二、安装与基本用法

2.1 安装 Stylus

Stylus 是基于 Node.js 的工具，需先安装 Node.js 和 npm。然后通过以下命令全局安装 Stylus：

Bash 复制代码

npm install -g stylus

验证安装是否成功：

Bash 复制代码

stylus --version

2.2 基本语法示例

创建一个 .styl 文件，如common.styl，编写以下代码：

Stylus 复制代码

// 定义变量
$background-color = #f0f0f0

// 嵌套写法
body
  background $background-color
  font-size 16px
  .container
    padding 20px
    border 1px solid #ccc

编译为 CSS：

Bash 复制代码

stylus common.styl -o common.css

生成的 CSS 代码：

Css 复制代码

body {
  background: #f0f0f0;
  font-size: 16px;
}
body .container {
  padding: 20px;
  border: 1px solid #ccc;
}

三、Stylus 与 CSS 的对比示例

3.1. 变量声明与使用

Stylus 代码：

stylus 复制代码

primary-color = #3498db
font-size = 16px

.button
  background primary-color
  font-size font-size

编译后的 CSS：

css 复制代码

.button {
  background: #3498db;
  font-size: 16px;
}

说明：

Stylus 使用 = 定义变量，变量名无需 $ 前缀（与 Sass 不同）。
CSS 中变量会被直接替换为实际值，变量本身不会出现在最终文件中。
优势：变量可复用，修改一处即可全局生效。

3.2. 嵌套写法

Stylus 代码：

stylus 复制代码

nav
  ul
    margin 0
    padding 0
    li
      display inline-block
      a
        text-decoration none

编译后的 CSS：

css 复制代码

nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  text-decoration: none;
}

说明：

Stylus 通过缩进表示层级关系，无需大括号 {}。
CSS 中会生成完整的嵌套选择器，但层级关系不会被压缩。
优势：代码更简洁，层级关系一目了然。

3.3. 混合宏（Mixins）

Stylus 代码：

stylus 复制代码

// 定义混合宏
border-radius(radius)
  -webkit-border-radius radius
  -moz-border-radius radius
  border-radius radius

// 使用混合宏
.button
  border-radius 5px

编译后的 CSS：

css 复制代码

.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

说明：

Stylus 的混合宏类似函数，支持参数传递。
CSS 中会直接插入所有浏览器前缀的代码。
优势：减少重复代码，提升兼容性维护效率。

3.4. 函数调用

Stylus 代码：

stylus 复制代码

// 定义函数：计算颜色变暗
darken(color, amount)
  hsla(hue(color), saturation(color), lightness(color) - amount, alpha(color))

// 使用函数
.header
  background darken(#ffffff, 10%)

编译后的 CSS：

css 复制代码

.header {
  background: hsla(0, 0%, 90%, 1);
}

说明：

Stylus 支持动态计算颜色、数值等复杂逻辑。
CSS 中会直接输出计算后的静态值。
优势：实现动态样式生成，无需手动计算。

四、Stylus 高级功能示例

4.1. 条件语句与循环

Stylus 代码：

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：

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 代码：

stylus 复制代码

// _variables.styl
primary-color = #e74c3c

// main.styl
@import 'variables'

.button
  background primary-color

编译后的 CSS：

css 复制代码

.button {
  background: #e74c3c;
}

说明：

Stylus 支持通过 @import 导入其他文件，实现模块化开发。
CSS 中会合并所有导入内容为一个文件。
优势：代码分层管理，提升可维护性。

五、总结

Stylus 通过简洁的语法和强大的功能，将 CSS 的编写从"静态描述"升级为"动态编程"。通过变量、嵌套、混合宏、函数等特性，开发者可以高效管理样式逻辑，同时保持代码的可读性和可维护性。结合模块化开发和构建工具集成，Stylus 是现代前端开发中不可或缺的工具之一。

最后提醒：

始终通过 --compress 参数压缩 CSS 文件以优化性能。
使用 --watch 实时监听文件变化，提升开发效率。