Stylus：让 CSS 编写更高效CSS 写烦了？试试 Stylus！这款超赞预处理器，缩进语法甩掉大括号分号，变量、

前言

在前端开发中，CSS 虽然能美化网页，但写起来难免有些繁琐。这时候，CSS 预处理器就派上用场了，而 Stylus 就是其中很有特色的一员。它凭借简洁的语法和强大的功能，受到了不少开发者的青睐。接下来，就让我们深入了解一下 Stylus。

一、Stylus 是什么

Stylus 是一款富有表现力、动态的、强大的 CSS 预处理器。它旨在简化 CSS 的编写过程，提供了诸多便捷的功能，让开发者能够更高效地创建和维护样式表。

二、Stylus 的特点

（一）独特的语法格式

Stylus 支持多种书写格式，其中最具特色的是缩进式语法，它不需要写大括号和分号，能让代码更加简洁清爽。

常规 CSS 写法：

body {
    margin: 0;
    padding: 0;
}

Stylus 的缩进式写法：
```
body
  margin 0
  padding 0
```

通过对比可以明显看出，Stylus 的缩进式语法大大减少了冗余符号，使代码更易读、易写。当然，Stylus 也支持类 CSS 语法，如果你习惯了传统的 CSS 写法，也可以在 Stylus 中使用大括号和分号，它会兼容这种写法。

（二）变量

Stylus 允许定义变量来存储常用的值，如颜色、尺寸、字体等，这使得样式的复用和修改变得非常方便。当需要修改某个值时，只需更改变量的定义，所有引用该变量的地方都会自动更新。

示例：

themeColor = #3498db
headerHeight = 80px

.header
  height headerHeight
  background themeColor

.button
  color themeColor
  padding 10px 20px

在上面的代码中，我们定义了主题色themeColor和头部高度headerHeight两个变量，并在.header和.button选择器中使用，这样当我们需要更换主题色或调整头部高度时，只需修改变量的值即可。

（三）混合（Mixins）

混合功能可以将一段 CSS 代码封装起来，在需要的地方进行调用，从而减少代码的重复编写。这对于处理那些需要在多个地方使用的复杂样式非常有用。

示例：

// 定义一个圆角混合
border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

.box1
  width 100px
  height 100px
  border-radius(5px)  // 调用混合

.box2
  width 200px
  height 200px
  border-radius(10px)  // 调用混合

通过定义border-radius混合，我们可以在.box1和.box2中轻松实现圆角效果，避免了重复编写浏览器前缀的代码。

（四）函数

Stylus 允许开发者自定义函数来处理一些逻辑操作，比如计算尺寸、处理颜色等，让样式编写更加灵活。

示例：

// 定义一个计算百分比的函数
percent(num, total)
  return (num / total) * 100%

.container
  width 100%

.item
  width percent(25, 100)  // 计算25占100的百分比，结果为25%

在这个例子中，我们自定义了percent函数来计算百分比，在.item中调用该函数得到宽度为 25%。

（五）选择器继承

选择器继承可以让一个选择器继承另一个选择器的所有样式，这有助于减少代码冗余，提高代码的可维护性。

示例：

.base-style
  margin 0
  padding 0
  list-style none

.nav-list
  @extend .base-style  // 继承.base-style的样式
  display flex

.footer-list
  @extend .base-style  // 继承.base-style的样式
  display inline-block

.nav-list和.footer-list都继承了.base-style的样式，然后再添加各自特有的样式。

（六）其他特性

Stylus 还支持条件判断、循环等特性，让样式编写更具逻辑性。

示例：

条件判断：

size = 10

if size > 5
  .box
    width 100px
else
  .box
    width 50px

循环：

for i in 1..3
  .col-{i}
    width (100% / 3) * i

三、Stylus 的安装与使用

（一）安装

首先需要安装 Node.js 和 npm（Node.js 自带 npm）。然后在命令行中运行以下命令进行全局安装。

npm install -g stylus

（二）使用

1. 创建一个.styl文件，例如style.styl，在其中编写 Stylus 代码。
1. 因为.styl文件无法直接使用，需要先转译为css文件才能被HTML页面解析，所以这一步就是要编译.styl文件为.css文件，需要在命令行中执行以下命令：
```
stylus input.styl -o output.css
```
这个命令的作用是将 input.styl 文件转译成 output.css 文件。
- 监听文件变动并自动转译： 每变动修改一次，就要手动输入命令编译一次太麻烦了，所以有自动编译的选项-w。使用这个命令后，当 input.styl 文件发生变化时，Stylus 会自动重新进行转译。
```
stylus -w input.styl -o output.css
```
- 直接转译目录下的所有文件： 还有批量转译的功能。
```
stylus src/ -o dist/
```
  该命令会把 src/ 目录下的所有 .styl 文件转译后输出到 dist/ 目录。

四、Stylus 的优势与适用场景

（一）优势

1. 语法简洁灵活，支持多种书写格式，减少了冗余代码。
1. 提供了丰富的功能，如变量、混合、函数等，提高了样式编写的效率和可维护性。
1. 可以方便地处理浏览器前缀等兼容性问题。

（二）适用场景

Stylus 适用于各种前端项目，尤其是大型项目。在大型项目中，样式文件往往比较复杂，使用 Stylus 可以更好地组织和管理样式代码，减少重复劳动，提高开发效率。

结语

Stylus 是一款非常优秀的 CSS 预处理器，它的出现让 CSS 编写变得更加轻松高效。如果你还没有尝试过，不妨在项目中体验一下，相信它会给你带来不一样的开发体验。
希望这篇文章能够对你有所帮助，如果文章有错误或者缺漏，欢迎在评论区指出，大家一起进步，谢谢🙏。