《Stylus 入门使用方法》

引言

Stylus 是一种灵活、动态的 CSS 预处理器，它允许开发者使用富有表现力的语法来生成 CSS。Stylus 的语法类似 Python，支持缩进，并且提供了大量的功能，如变量、混合（mixins）、继承等，使得编写 CSS 更加高效和有趣。本文将介绍 Stylus 的基本语法和使用方法。

文章目的

本篇文章旨在帮助初学者快速入门 Stylus，了解其基本语法和使用技巧。

环境准备

- 安装 Node.js 和 npm（Node 包管理器）。
- 在项目中安装 Stylus：

npm install stylus --save-dev

Stylus 基本语法

1. **变量**  
   在 Stylus 中，变量以美元符号 `$` 开始。例如：

   $primary-color = #333
   body
     color $primary-color

2. **嵌套规则**  
   Stylus 允许 CSS 规则嵌套，这使得结构更加清晰：

  
   nav
     ul
       margin: 0
     li
       display: inline-block

3. **混合（Mixins）**  
   类似于其他 CSS 预处理器，Stylus 支持混合，允许你重用一组属性：

   clearfix()
     &::after
       content: ""
       display: table
       clear: both
   .navbar
     clearfix()

4. **继承**  
   使用 `@extends` 可以扩展一个混合，实现继承：
   ```stylus

   button-style()
     padding: 10px 20px
     border: none
     // ... other styles
   .primary-button
     @extends button-style
     background-color: blue

5. **运算**  
   Stylus 支持各种运算操作，包括加法、减法、颜色混合等：
   ```stylus

   $width = 960px
   $padding = 20px
   .content
     width: $width - ($padding * 2)

6. **条件语句**  
   使用 `if`、`else` 和 `unless` 可以实现条件逻辑：

   $mode = 'light'
   if $mode == 'light'
     body
       background-color: white
       color: black
   else
     body
       background-color: black
       color: white

7. **迭代**  
   使用 `for`、`each` 和 `while` 可以进行迭代操作：

   for num in (1, 2, 3, 4, 5)
     .col-{num}
       width: (100 / 5) * num + '%'

8. **函数**  
   可以定义自己的函数来复用代码：

   border-radius($radius)
     -webkit-border-radius: $radius
     -moz-border-radius: $radius
     border-radius: $radius
   .box
     border-radius(5px)

使用 Stylus 编译 CSS

1. **命令行编译**  
   使用 Stylus 的命令行工具编译 `.styl` 文件到 `.css`：

   stylus style.styl -o style.css

2. **在项目中集成**  
   可以在 Webpack 或其他构建工具中集成 Stylus，以实现自动化构建。

结语

Stylus 提供了一种强大且富有表现力的方式来编写 CSS，它通过提供变量、混合、继承等特性，极大地提高了 CSS 的可维护性和可读性。希望本文能帮助你快速入门 Stylus，让你的前端开发工作更加高效。如果你对 Stylus 有任何疑问或想要探索更高级的用法，Stylus 的官方文档是一个很好的学习资源。