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。