Stylus - 从小白到精通 #

什么是 Stylus？ #

Stylus 是一款功能强大的 CSS 预处理器，由 LearnBoost 团队开发，使用 Node.js 编写。它提供了一种更高效、更灵活的方式来编写 CSS 样式表。

为什么选择 Stylus？ #

优势	说明
语法灵活	支持缩进语法和传统 CSS 语法，可选择性地省略冒号、分号、花括号
功能强大	内置变量、混入、函数、条件语句、循环等编程特性
易于学习	语法简洁直观，学习曲线平缓
兼容性好	输出标准 CSS，可在任何项目中使用
生态丰富	拥有丰富的插件和工具链支持

Stylus 的特点 #

text

传统 CSS 写法：
┌─────────────────────────────────────────┐
│ .container {                            │
│   width: 100%;                          │
│   padding: 20px;                        │
│ }                                       │
│ .container .item {                      │
│   color: #333;                          │
│ }                                       │
└─────────────────────────────────────────┘

Stylus 写法：
┌─────────────────────────────────────────┐
│ .container                              │
│   width 100%                            │
│   padding 20px                          │
│   .item                                 │
│     color #333                          │
└─────────────────────────────────────────┘

应用场景 #

大型项目 - 模块化管理样式，提高可维护性
组件库开发 - 使用变量和混入实现主题定制
响应式设计 - 利用函数和条件语句简化媒体查询
团队协作 - 统一的代码风格和复用机制

学习路线图 #

text

入门阶段 ─────────────────────────────────────────
│
├─ 1. 入门基础
│   ├─ 什么是 Stylus
│   ├─ 安装与配置
│   └─ 基础语法
│
├─ 2. 核心概念
│   ├─ 变量
│   ├─ 选择器
│   └─ 运算符
│
进阶阶段 ─────────────────────────────────────────
│
├─ 3. 混入与函数
│   ├─ 混入 (Mixins)
│   ├─ 自定义函数
│   └─ 内置函数
│
├─ 4. 控制结构
│   ├─ 条件语句
│   └─ 循环语句
│
├─ 5. 高级特性
│   ├─ 插值
│   └─ 模块化与导入
│
精通阶段 ─────────────────────────────────────────
│
├─ 6. 工程化
│   ├─ 插件系统
│   └─ 最佳实践
│
└─ 7. 对比与选择
    └─ 与其他预处理器对比

快速入门示例 #

下面是一个完整的 Stylus 文档示例：

stylus

// 定义变量
primary-color = #3498db
font-size = 14px

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

// 样式规则
.button
  background-color primary-color
  font-size font-size
  padding 10px 20px
  border-radius(5px)
  
  &:hover
    background-color darken(primary-color, 10%)

编译后的 CSS：

css

.button {
  background-color: #3498db;
  font-size: 14px;
  padding: 10px 20px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.button:hover {
  background-color: #2980b9;
}

Stylus - 从小白到精通 #

什么是 Stylus？ #

为什么选择 Stylus？ #

Stylus 的特点 #

应用场景 #

学习路线图 #

快速入门示例 #

学习建议 #

入门阶段（1-2天） #

进阶阶段（3-5天） #

精通阶段（持续学习） #

开始学习 #