深度解析 Stylus：从基础用法到进阶技巧全面剖析

深度解析 Stylus：从基础用法到进阶技巧全面剖析

一、Stylus 简介

Stylus 是一款以简洁、灵活著称的 CSS 预处理器，它的语法宽松、结构清晰，支持变量、嵌套、运算、Mixins 等高级特性，能极大地提升样式编写的效率。其独特之处在于，开发者可以省略分号、大括号、甚至冒号等符号，这让 Stylus 成为喜爱简洁代码风格开发者的理想选择。

相关文章推荐

• Stylus 官网
• 预处理器语言 SCSS - 从基础到进阶的全面解析
• 预处理器语言 LESS - 从基础到进阶的全面解析

---

二、基础用法：Stylus 核心特性详解

1. 变量：代码复用的利器

变量在 Stylus 中极其灵活，不仅可以定义颜色、字体等常量，还能用于长度、数值运算等，提升了样式的一致性与复用性。

// 定义颜色变量
primary-color = #4CAF50

// 应用变量
.button
  background-color primary-color

2. 嵌套：结构更清晰

Stylus 支持基于层次结构的嵌套样式，使代码更直观，并有助于样式与 HTML 结构保持一致。

.nav
  ul
    list-style none
    li
      display inline-block

3. Mixins：复用逻辑块

Mixins 是 Stylus 的一大亮点，用于封装常用样式模块，调用时灵活自如。

// 创建一个 mixin
border-radius(radius)
  border-radius radius

// 调用 mixin
.button
  border-radius(5px)

4. 运算：动态调整样式

运算让 Stylus 在处理动态样式时更为轻松，比如尺寸和间距的精确计算。

base = 5px

.box
  margin base * 2
  padding base + 10px

5. 媒体查询嵌套：响应式设计变简单

媒体查询嵌套不仅语法简洁，还能直接在选择器中编写响应式代码。

.container
  width 100%

  @media (min-width: 768px)
    width 750px

6. 颜色函数：轻松操作颜色

Stylus 自带颜色函数，如 lighten、darken 等，直接用于颜色调整。

color = #ff0000

.button
  color lighten(color, 20%)
  background-color darken(color, 10%)

7. 伪类与伪元素：简洁处理状态样式

伪类操作简化了状态样式的编写，让 hover 等效果更加清晰易读。

.link
  color blue

  &:hover
    text-decoration underline

---

三、进阶技巧：Stylus 实战妙用

1. 作用域与命名空间：变量管理更灵活

通过定义局部变量，Stylus 让变量管理变得更清晰。

outer-color = #f00

.outer
  inner-color = #0f0
  .inner
    color inner-color
    background-color outer-color

2. CSS Sprites：轻松实现图标集

使用 CSS Sprites，可以轻松实现多个图标的管理与定位。

sprite-path = "path/to/sprites.png"

.icon(name, position)
  background-image url(sprite-path)
  background-position position
  display inline-block
  width 32px
  height 32px

3. 自定义函数：增强代码复用性

Stylus 支持自定义函数，比如可用于颜色动态调整。

darken-color(color, amount)
  return darken(color, amount)

.button
  background-color darken-color(#4CAF50, 15%)

4. 条件语句：根据条件动态生成样式

Stylus 支持 when 条件语句，使样式逻辑更加灵活。

color = blue
is-active = true

.button
  background-color color

  &.active when is-active
    background-color darken(color, 20%)

5. 嵌套列表样式：适合导航等复杂布局

嵌套列表适用于如导航菜单的多层嵌套结构。

.nav
  ul
    list-style none
    li
      display inline-block

      &.active
        font-weight bold

6. 循环遍历：处理重复数据

Stylus 提供的 each 函数，便于对数组或对象进行遍历。

colors = red green blue

.each-color
  each(colors, {
    .color-{value}
      background-color value
  })

---

四、总结

Stylus 在简洁性、灵活性和高效性方面具有显著优势，适合希望更自由地控制样式的开发者。其独特的语法、强大的运算、嵌套和函数等特性使 Stylus 成为 CSS 预处理器中的一款出色工具。无论是小型还是大型项目，Stylus 都能帮助开发者编写出简洁、易于维护的 CSS 代码。

---

推荐阅读

• SCSS 预处理器解析
• LESS 预处理器详解