Stylus 简介

Stylus 是一个强大的 CSS 预处理器，它可以帮助开发者更高效地编写 CSS 代码。通过使用 Stylus，你可以利用变量、嵌套规则、函数等特性，来简化 CSS 编写流程。

特性

• 变量：使用变量来存储颜色、字体大小等值，方便统一修改。
• 嵌套规则：简化嵌套选择器，使代码更易读。
• 混合：将代码块重用，提高代码复用率。
• 函数：自定义函数，实现复杂的计算和逻辑处理。

快速入门

以下是一个简单的 Stylus 示例：

// 定义变量
$primary-color: #3498db;

// 使用变量
body
  background-color: $primary-color;

// 嵌套规则
.nav
  li
    list-style: none
    display: inline-block
    margin-right: 10px

// 混合
@mixin box-shadow($shadow)
  -webkit-box-shadow: $shadow
  -moz-box-shadow: $shadow
  box-shadow: $shadow

  .box
    @include box-shadow(0 4px 8px rgba(0,0,0,0.1))

扩展阅读

更多关于 Stylus 的内容，可以参考我们的Stylus 教程。

图片展示

下面是一张关于 CSS 预处理器的图片：