什么是 Stylus #

简介 #

Stylus 是一款革命性的 CSS 预处理器，由 LearnBoost 团队于 2010 年开发，使用 Node.js 编写。它扩展了 CSS 语言，添加了变量、混入、函数、条件语句、循环等编程特性，让 CSS 更加强大和易于维护。

设计理念 #

Stylus 的设计哲学是：

让 CSS 编写更加简洁、灵活、强大。通过引入编程语言的特性，解决 CSS 在大型项目中的维护难题。

核心原则 #

原则	说明
语法自由	可选择性地省略冒号、分号、花括号
表达力强	支持变量、函数、条件语句等编程特性
兼容性好	输出标准 CSS，可在任何环境中使用
可扩展	支持插件系统，可自定义功能

Stylus 的历史 #

text

2010年 ─── LearnBoost 团队创建 Stylus
    │
    │      首次发布，引入缩进语法
    │
2012年 ─── Stylus 0.30 发布
    │
    │      添加更多内置函数
    │
2014年 ─── 生态系统扩展
    │
    │      大量插件涌现
    │
至今   ─── 持续维护更新
    │
    │      广泛应用于各类项目

CSS 预处理器概述 #

什么是 CSS 预处理器？ #

CSS 预处理器是一种脚本语言，扩展了 CSS 的功能，通过编译器将源代码转换为标准的 CSS。

text

┌─────────────────┐
│   预处理器源码   │
│   (.styl/.scss) │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│   编译器处理     │
│   (Parser)      │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│   标准 CSS      │
│   (.css)        │
└─────────────────┘

为什么需要预处理器？ #

传统 CSS 存在以下问题：

问题	说明
无法复用	没有变量和函数机制，代码重复
难以维护	大型项目中样式难以管理
缺乏逻辑	没有条件判断和循环能力
选择器冗长	嵌套结构需要重复书写

Stylus 的优势 #

1. 语法灵活 #

Stylus 支持多种语法风格：

stylus

// 缩进语法（推荐）
.container
  width 100%
  padding 20px

// 带 CSS 风格的语法
.container {
  width: 100%;
  padding: 20px;
}

// 混合风格
.container
  width: 100%
  padding 20px;

2. 变量支持 #

stylus

// 定义变量
primary-color = #3498db
font-stack = Helvetica, sans-serif

.button
  background-color primary-color
  font-family font-stack

3. 嵌套规则 #

stylus

.nav
  ul
    list-style none
  
  li
    display inline-block
    
    a
      text-decoration none
      color #333
      
      &:hover
        color primary-color

4. 混入 (Mixins) #

stylus

// 定义混入
border-radius(radius)
  -webkit-border-radius radius
  -moz-border-radius radius
  border-radius radius

// 使用混入
.box
  border-radius(5px)

5. 函数 #

stylus

// 定义函数
add(a, b)
  a + b

// 使用函数
.element
  width add(100px, 50px)  // 150px

6. 条件语句 #

stylus

button-type = 'primary'

.button
  if button-type == 'primary'
    background-color #3498db
  else if button-type == 'danger'
    background-color #e74c3c
  else
    background-color #95a5a6

7. 循环 #

stylus

// for 循环
for i in 1..5
  .col-{i}
    width (i * 20)%

// 输出：
// .col-1 { width: 20%; }
// .col-2 { width: 40%; }
// ...

Stylus vs CSS 对比 #

传统 CSS 写法 #

css

.header {
  background-color: #333;
  padding: 20px;
}
.header .nav {
  list-style: none;
}
.header .nav li {
  display: inline-block;
}
.header .nav li a {
  color: #fff;
}
.header .nav li a:hover {
  color: #3498db;
}

Stylus 写法 #

stylus

.header
  background-color #333
  padding 20px
  
  .nav
    list-style none
    
    li
      display inline-block
      
      a
        color #fff
        
        &:hover
          color #3498db

应用场景 #

大型项目 #

text

项目结构示例：
├── styles/
│   ├── variables.styl    # 变量定义
│   ├── mixins.styl       # 混入定义
│   ├── base.styl         # 基础样式
│   ├── components/       # 组件样式
│   │   ├── buttons.styl
│   │   ├── forms.styl
│   │   └── cards.styl
│   └── main.styl         # 主入口

组件库开发 #

stylus

// 主题变量
theme = {
  primary: #3498db,
  success: #2ecc71,
  warning: #f39c12,
  danger: #e74c3c
}

// 按钮组件
button(color)
  padding 10px 20px
  border none
  border-radius 4px
  background-color color
  color #fff
  cursor pointer
  
  &:hover
    background-color darken(color, 10%)

.btn-primary
  button(theme.primary)

.btn-success
  button(theme.success)

响应式设计 #

stylus

// 断点变量
breakpoints = {
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px
}

// 响应式混入
mobile()
  @media (max-width: breakpoints.mobile)
    {block}

tablet()
  @media (min-width: breakpoints.tablet)
    {block}

// 使用
.container
  width 100%
  
  +tablet()
    width 750px
    
  +desktop()
    width 960px

文件扩展名 #

Stylus 文件使用以下扩展名：

.styl - 标准扩展名

下一步 #

现在你已经了解了 Stylus 是什么，接下来学习安装与配置开始实际使用！