Stylus入门及使用方法

Stylus 是一个富有表现力的、动态的 CSS 预处理器，它可以让你用更加简洁、强大的方式编写 CSS。与其他 CSS 预处理器（如 Sass 和 Less）类似，Stylus 提供了变量、混合（mixins）、函数和条件语句等功能，使得 CSS 的编写更为灵活和强大。下面是一些基本的 Stylus 入门使用方法：

安装 Stylus

首先，你需要在你的开发环境中安装 Node.js。然后，通过 npm（Node.js 的包管理器）安装 Stylus：

npm install -g stylus

这个命令将 Stylus 安装为全局包，这样你就可以在任何地方使用它的命令行工具。

基本语法

Stylus 的语法非常灵活，既可以写出类似于传统 CSS 的代码，也可以省略大括号、分号和冒号，写出更为简洁的代码。例如：

标准 CSS 写法
body {
  font: 12px Helvetica, Arial, sans-serif;
}
Stylus 简洁写法
body
  font 12px Helvetica, Arial, sans-serif

使用变量

在 Stylus 中，你可以定义变量来复用一些常见的值：

font-size = 14px
body
  font font-size Helvetica, Arial, sans-serif

使用混合（Mixins）

混合可以让你复用一整块样式：

border-radius(n)
  -webkit-border-radius n
  border-radius n

.box
  border-radius(5px)

嵌套

Stylus 支持选择器的嵌套，这使得结构更为清晰：

.nav
  background-color: #333
  ul
    padding: 0
    li
      display: inline-block
      a
        color: white
        text-decoration: none

条件语句和循环

Stylus 支持条件语句和循环，这为复杂的逻辑提供了可能：

for num in (1..3)
  .box-{num}
    width: 10px * num

is-large = true
if is-large
  font-size = 20px
else
  font-size = 12px

编译 Stylus

将 Stylus 文件编译成 CSS 可以通过命令行工具完成：

stylus input.styl

这个命令会读取 input.styl 文件，并生成一个同名的 CSS 文件 input.css 。

集成开发环境

对于大多数前端开发环境，你可以找到 Stylus 的插件或扩展，比如 Webpack 的 stylus-loader ，这可以让 Stylus 文件的编译更加自动化和集成。

学习资源

官方文档： 最权威的学习资源是其官方文档，包含了所有的语法细节和高级特性。
在线教程： 互联网上有许多免费的教程可以帮助你开始使用 Stylus。

通过以上步骤和方法，你可以开始使用 Stylus 来编写更加高效和强大的 CSS。