Stylus 是一种动态样式语言，它允许使用更少的代码来生成 CSS。它是一个预处理器，这意味着你需要在浏览器加载前将 Stylus 代码转换成 CSS。Stylus 提供了多种功能，如变量、混合（mixins）、函数、继承等，这些功能使得编写 CSS 更加高效和有趣。
### Stylus 详解
1. **变量**：在 Stylus 中，你可以使用变量来存储颜色、字体等值，以便于在代码中重复使用。
```stylus
color = #ffcc00
body
color color
```
2. **嵌套规则**：Stylus 允许你嵌套 CSS 规则，这样可以更清晰地表示层级关系。
```stylus
body
padding 20px
h1
font-size 24px
```
3. **混合**：混合类似于 LESS 中的 mixin，允许你重用一组属性。
```stylus
center()
text-align center
margin auto
div
center()
```
4. **函数**：Stylus 允许你定义自己的函数，这在处理复杂的计算时非常有用。
```stylus
border-radius(size)
-webkit-border-radius size
-moz-border-radius size
border-radius size
button
border-radius(5px)
```
5. **继承**：在 Stylus 中，你可以使用 `@extends` 来实现继承，这与 CSS 中的 `@extend` 规则类似。
```stylus
.error
color red
font-weight bold
.error-message
@extends .error
font-size 14px
```
6. **运算**：Stylus 支持各种运算，包括加法、减法、乘法和除法。
```stylus
padding = 10px
div
padding padding * 2
```
### 如何引入 Stylus
引入 Stylus 到你的项目中通常有以下几种方式：
1. **直接在 HTML 中**：你可以在 HTML 文件的 `<head>` 部分通过 `<style>` 标签直接编写 Stylus 代码。
```html
<style type="text/styl">
// 你的 Stylus 代码
</style>
```
2. **通过标签链接**：使用 `<link>` 标签引入一个 `.styl` 文件。
```html
<link rel="stylesheet/stylus" href="style.styl">
```
3. **构建工具**：在构建工具如 Gulp、Grunt 或 Webpack 中，你可以配置相应的插件来处理 Stylus 文件。
- **Gulp**：使用 `gulp-stylus` 插件。
- **Grunt**：使用 `grunt-contrib-stylus` 插件。
- **Webpack**：使用 `stylus-loader` 和 `css-loader`。
4. **Node.js**：在 Node.js 项目中，你可以通过 `require` 或 `import` 引入 Stylus。
```javascript
const stylus = require('stylus');
```
5. **命令行工具**：Stylus 提供了一个命令行工具，可以直接在终端中编译 `.styl` 文件。
```bash
stylus style.styl -o style.css
```
使用 Stylus 可以帮助你编写更简洁、更模块化的 CSS 代码，并且提高开发效率。不过，记得在生产环境中，你需要将 Stylus 代码编译成 CSS，因为浏览器无法直接解析 Stylus。