用 Stylus 优化你的 CSS

Stylus

什么是 Stylus

Stylus 是一种动态的、基于节点的样式表预处理器，它允许你使用更加简洁的语法编写 CSS 代码。Stylus 通过扩展 CSS 语言，提供了变量、嵌套规则、函数等特性，使得样式代码更加模块化、可维护。Stylus 的设计非常灵活，支持无括号、无分号的语法风格，同时也兼容传统的 CSS 语法。

优势与特点

1. 简洁的语法：Stylus 提供了一种无括号、无分号的简洁语法，使得代码更加干净和易读。

2. 强大的变量与混合宏：通过使用变量和混合宏，样式代码的可重用性和可维护性大大提高。

3. 嵌套规则：允许嵌套样式规则，使得层级样式更加直观。

4. 内置函数和用户定义函数：Stylus 提供了一系列内置函数，同时支持用户定义函数，以实现更复杂的样式逻辑。

5. 灵活的引入与导入：支持文件的引入与导入，使得样式代码可以模块化管理。

Stylus 规则与语法

变量

在Stylus中，变量使用$符号定义，并且可以在整个样式表中重复使用。这有助于保持代码的一致性，并使修改全局样式值变得简单。

• 变量名是大小写是敏感的。

• 变量在定义后可以在任何地方引用。

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

使用变量时，只需引用变量名即可：

body
  color $primary-color
  font-size $font-size

嵌套规则

Stylus 支持嵌套规则，使得样式层级结构更加清晰

• 嵌套规则应该反映HTML的DOM结构。

nav
  ul
    margin 0
    padding 0
    list-style none

  li
    display inline-block

    a
      display block
      padding 10px 20px
      color #333
      text-decoration none

      &:hover
        background #f2f2f2

混合宏（Mixins）

混合宏是 Stylus 中一个强大的特性，用于定义一组可重用的样式。使用 mixin 关键字来定义混合宏。你可以在一个地方定义样式块，然后在多个地方重复使用它。

mixin button($bg-color, $text-color)
  display inline-block
  padding 10px 20px
  border none
  background $bg-color
  color $text-color
  text-align center
  cursor pointer

.btn-primary
  button($primary-color, #fff)

.btn-secondary
  button($secondary-color, #fff)

条件和循环

Stylus 支持条件语句和循环，使得样式代码更加灵活：

$theme = light

body
  if $theme == light
    background #fff
    color #000
  else
    background #000
    color #fff

for i in 1..3
  .col-{i}
    width: (i * 10)% 

内置函数

Stylus 提供了许多内置函数，如颜色操作、数学运算等。例如：

$primary-color = #3498db

.box
  background $primary-color
  border 1px solid darken($primary-color, 20%)
  padding 20px
  width 50%
  margin: auto
  text-align center
  color #fff

使用Stylus

要开始使用 Stylus，首先需要在项目中安装 Stylus。以下是一些常用的 Stylus 命令及其含义：

安装 Stylus

在项目中安装 Stylus 可以使用 npm：

npm install stylus -g

这将会在全局环境中安装 Stylus，使你能够使用 stylus 命令进行编译。

编译 Stylus 文件

将 Stylus 文件编译为 CSS 文件，使用以下命令：

stylus <input-file>.styl -o <output-file>.css

例如，将 styles.styl 编译为 styles.css：

stylus styles.styl -o styles.css

监视文件变化

可以使用 -w 选项来监视 Stylus 文件的变化，并在文件改变时自动重新编译：

stylus -w styles.styl -o styles.css

压缩输出

使用 -c 选项可以生成压缩的 CSS 输出：

stylus -c styles.styl -o styles.min.css

最后

在实际编程实践中，无论是大型项目还是设计系统的构建，Stylus 都凭借其独特的优势和价值，为开发者提供了强大的支持。使用 Stylus 不仅可以显著提升开发效率，还能够在企业级开发中更快地应对复杂场景和大规模样式的管理。

同时在大厂面试中，使Stylus 的使用不仅展示了你对 CSS 预处理器技术的熟悉程度，还体现了你对样式管理和设计的深入思考。

Stylus - 富于表现力、健壮、功能丰富的 CSS 预处理器 | Stylus 中文网 (stylus-lang.cn)