Sass/SCSS #

什么是 Sass？ #

Sass（Syntactically Awesome Style Sheets）是最成熟、稳定、强大的 CSS 预处理器。它为 CSS 添加了变量、嵌套、混合、函数等强大功能，让 CSS 编写更加高效和可维护。

Sass vs SCSS #

Sass 有两种语法格式：

特性	Sass	SCSS
文件扩展名	`.sass`	`.scss`
语法风格	缩进式，无大括号和分号	CSS 兼容，使用大括号和分号
学习曲线	较低	更接近 CSS，易于上手
兼容性	不兼容原生 CSS	完全兼容 CSS 语法

sass

// Sass 语法
.container
  width: 100%
  padding: 20px
  .item
    color: red

scss

// SCSS 语法
.container {
  width: 100%;
  padding: 20px;
  .item {
    color: red;
  }
}

本指南主要使用 SCSS 语法，因为它更接近 CSS，学习成本更低。

文档结构 #

本指南按以下结构组织：

1. 基础入门 #

主题	描述	文档链接
Sass 简介	了解 Sass 的历史、特点和优势	intro.md
安装配置	Sass 的安装和环境配置	installation.md
语法基础	SCSS 基础语法和文件结构	syntax.md

2. 核心概念 #

主题	描述	文档链接
变量	变量的定义和使用	variables.md
嵌套规则	选择器和属性的嵌套	nesting.md
模块化	使用 @import 和 @use 组织代码	partials.md

3. 进阶特性 #

主题	描述	文档链接
混合宏	@mixin 和 @include 的使用	mixins.md
自定义函数	创建和使用自定义函数	functions.md
控制指令	@if、@for、@each、@while	control-directives.md

4. 高级特性 #

主题	描述	文档链接
运算符	数学运算、比较运算、逻辑运算	operators.md
数据类型	数字、字符串、颜色、列表、映射	data-types.md
映射(Maps)	键值对数据结构的使用	maps.md

5. 专家级 #

主题	描述	文档链接
继承扩展	@extend 指令的使用	extend.md
模块系统	@use、@forward 模块化开发	modules.md
最佳实践	Sass 项目最佳实践	best-practices.md
项目结构	大型项目的文件组织	project-structure.md

学习路径 #

入门阶段（Sass 新手） #

了解 CSS 预处理器的基本概念
安装和配置 Sass 环境
学习 SCSS 基础语法
掌握变量的使用
理解嵌套规则

进阶阶段（Sass 熟练） #

掌握模块化开发方式
学习混合宏（Mixin）的使用
创建自定义函数
使用控制指令
理解运算符和数据类型

高级阶段（Sass 专家） #

深入理解 @extend 继承机制
掌握模块系统（@use、@forward）
学习映射（Maps）的高级用法
创建可复用的 Sass 库
性能优化和最佳实践

大师阶段（Sass 大师） #

构建企业级 Sass 架构
设计可维护的样式系统
开发通用 Sass 工具库
参与开源项目贡献
持续关注 Sass 最新发展

为什么学习 Sass？ #

提高开发效率 #

scss

// 使用变量
$primary-color: #3498db;

.button {
  background-color: $primary-color;
  
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

增强代码可维护性 #

scss

// 使用混合宏
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
}

实现模块化开发 #

scss

// _variables.scss
$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

// _buttons.scss
@use 'variables' as *;

.btn-primary {
  background-color: map-get($colors, primary);
}

Sass vs 其他预处理器 #

特性	Sass	Less	Stylus
语言	Ruby/Dart	JavaScript	JavaScript
语法	SCSS/Sass	CSS 兼容	灵活语法
变量	`$var`	`@var`	`var` 或 `$var`
混合宏	@mixin	.class	function
社区	最大	较大	较小
学习曲线	中等	较低	较低

资源推荐 #

Sass 官方文档：最权威的 Sass 文档
Sass Guidelines：Sass 编写规范
7-1 Pattern：项目架构模式
SassMeister：在线 Sass 编译器
Awesome Sass：Sass 资源集合

贡献指南 #

欢迎对本指南进行贡献！如果你发现错误或有改进建议，请联系我们。

更新日志 #

2026-03-28：创建初始版本，包含完整的 Sass/SCSS 学习大纲

继续探索本指南，逐步掌握 Sass/SCSS 技术，从新手成长为 CSS 预处理器专家！