Stylus 教程

Stylus 是一个功能强大的 CSS 预处理器，它允许开发者使用更加简洁、优雅的语法来编写样式表。Stylus 具有极高的灵活性和可扩展性，它不仅支持传统的 CSS 语法，还提供了许多独特的特性，如变量、混合（mixins）、条件语句等，使得编写复杂的样式变得更加简单。

安装 Stylus

安装 Stylus 需要 Node.js 环境的支持。首先确保你的机器上已经安装了 Node.js 和 npm（Node 包管理器）。然后可以通过以下命令全局安装 Stylus：

npm install -g stylus

这将使你可以在任何地方使用 stylus 命令来编译 Stylus 文件。

编译 Stylus 文件

一旦安装完成，你可以通过命令行来编译 Stylus 文件。假设你有一个名为 styles.styl 的 Stylus 文件，可以使用以下命令将其编译为 CSS：

stylus styles.styl -o output.css

这里的 -o 参数用于指定输出文件名或目录。如果需要实时监听文件变化并自动重新编译，可以使用 -w 参数：

stylus -w styles.styl -o output.css

Stylus 基础语法

空白符敏感

与 Sass 或 Less 不同，Stylus 对空白符非常敏感。这意味着你可以自由地使用空格或制表符来组织代码结构，而不需要像 CSS 那样使用大括号和分号。

body
  font-size 16px
  color #333

变量

Stylus 支持使用 $ 符号定义变量，用来存储颜色值、字体大小等常量，方便在项目中重复使用。

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

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

混合（Mixins）

混合是一种可重用的代码块，允许你定义一组属性，并在其他选择器中调用它们。

border-radius($radius)
  border-radius $radius

.box
  border-radius(5px)

条件语句

Stylus 提供了条件语句，可以根据不同的条件来设置不同的样式。

is-landscape(width, height)
  if width > height
    background-color green
  else
    background-color red

.container
  is-landscape(1000px, 500px)

循环

循环可以帮助你在多个元素上应用相同的样式，或者生成一系列相关的类。

for $i in (1..5)
  .item-$i
    padding 10px * $i

总结

以上是关于 Stylus 的基础介绍。通过灵活运用这些特性，你可以显著提高 CSS 的编写效率，同时保持代码的整洁性和可维护性。接下来的章节将进一步探讨 Stylus 的高级特性及其实际应用。