• 文档
• 教程

本指南基于 learnxinyminutes-docs 仓库中的西班牙语版 Sass 教程 es/sass.md（其英文原版为 sass.md）整理成文。该教程采用"可编译代码即文档"（code documentation written as code）的体例，用带注释的 SCSS 示例逐段讲解变量、控制指令、Mixin、函数、继承、嵌套、局部文件、占位符选择器与数学运算等核心特性，并逐一给出编译后的 CSS 输出。读完本文，你将系统掌握 Sass 的完整语法要素，理解每段代码的编译结果，并能在实际项目中据此写出可维护、DRY（Don't Repeat Yourself）的样式代码。

教程定位：Sass 到底是什么

Sass 是一门扩展 CSS 的语言，在 CSS 之上增加了变量、嵌套、Mixin 等特性。它与其他预处理器（例如 Less）一样，帮助开发者写出可维护、避免重复的代码。需要特别说明的是：Sass并不会引入新的样式属性，它提供的是让你更高效地书写 CSS、并让维护变得更容易的"工具层"。因此，如果你已经熟悉 CSS3，通常可以相对较快地掌握 Sass。

Sass 提供两种语法可供选择：

• SCSS：与 CSS 语法一致，只是额外叠加了 Sass 的特性，本教程全程使用 SCSS；
• Sass（原始语法）：使用缩进代替花括号与分号。

教程正文以一个大的scss代码块为主体，先交代注释规则：单行注释（//）在 Sass 被编译为 CSS 时会被删除，多行注释（/* */）会被保留。这一规则决定了哪些注释属于开发期说明、哪些可以随样式表发布。

变量（Variables）：一处修改，全局生效

使用$符号即可创建一个变量，用来存储 CSS 值（如颜色、字体栈等）。教程中的示例：

$primary-color: #A3A4FF; $secondary-color: #51527F; $body-font: 'Roboto', sans-serif; body { background-color: $primary-color; color: $secondary-color; font-family: $body-font; }

编译结果为：

body { background-color: #A3A4FF; color: #51527F; font-family: 'Roboto', sans-serif; }

变量的价值在于：样式表中所有引用处共享同一份取值，想改颜色时只需修改定义处一次，而不必在整份样式表中逐个替换。这正是 DRY 原则在样式层的最小实践单元。后续的 Mixin、函数与数学运算示例中，变量也将持续扮演"定义一次、多处复用"的角色。

控制指令（Control Directives）：用逻辑驱动编译

Sass 允许使用@if、@else、@for、@while和@each来控制代码如何编译成 CSS。这些指令让样式表的生成过程具备条件判断与循环能力。

@if / @else：条件编译

@if/@else块的行为与预期完全一致。教程用一个调试模式开关演示：

$debug: true !default; @mixin debugmode { @if $debug { @debug "Modo debug activado"; display: inline-block; } @else { display: none; } } .info { @include debugmode; }

当$debug为true时，.info会显示；为false时则不会显示。这里有两个值得注意的细节：

• !default标记表示"若该变量尚未被赋值，才使用此默认值"，便于调用方覆盖；
• @debug会在命令行/控制台输出调试信息，非常适合在调试 SCSS 时检查变量内容。

$debug为true时编译结果：

.info { display: inline-block; }

@for：区间循环（through 与 to 的区别）

@for是遍历一段取值区间的控制循环，特别适合为一批同类元素批量生成样式。它有两种形式：through包含最后一个值，to止于最后一个值之前。

@for $c from 1 to 4 { div:nth-of-type(#{$c}) { left: ($c - 1) * 900 / 3; } } @for $c from 1 through 3 { .myclass-#{$c} { color: rgb($c * 255 / 3, $c * 255 / 3, $c * 255 / 3); } }

#{$c}是插值语法（interpolation），把变量值嵌入选择器或属性值中。编译结果：

div:nth-of-type(1) { left: 0; } div:nth-of-type(2) { left: 300; } div:nth-of-type(3) { left: 600; } .myclass-1 { color: #555555; } .myclass-2 { color: #aaaaaa; } .myclass-3 { color: white; /* SASS 会自动将 #FFFFFF 转换为 white */ }

对比可知：from 1 to 4实际只生成 1、2、3 三个取值（止于 4 之前），而from 1 through 3也生成 1、2、3，但语义是包含末值 3。示例还顺带演示了颜色函数的运算：rgb()中传入$c * 255 / 3，随$c递增得到灰阶加深的颜色，且#FFFFFF会被 Sass 自动规范化为white。

@while：条件循环

@while非常直白：只要条件为真就持续生成规则，并在循环体内手动推进计数变量。

$columns: 4; $column-width: 80px; @while $columns > 0 { .col-#{$columns} { width: $column-width; left: $column-width * ($columns - 1); } $columns: $columns - 1; }

编译输出：

.col-4 { width: 80px; left: 240px; } .col-3 { width: 80px; left: 160px; } .col-2 { width: 80px; left: 80px; } .col-1 { width: 80px; left: 0px; }

@each：遍历列表

@each与@for类似，但遍历的是列表而非序数值。列表的书写方式与其他变量相同，以空格作为分隔符：

$social-links: facebook twitter linkedin reddit; .social-links { @each $sm in $social-links { .icon-#{$sm} { background-image: url("images/#{$sm}.png"); } } }

输出：

.social-links .icon-facebook { background-image: url("images/facebook.png"); } .social-links .icon-twitter { background-image: url("images/twitter.png"); } .social-links .icon-linkedin { background-image: url("images/linkedin.png"); } .social-links .icon-reddit { background-image: url("images/reddit.png"); }

@each天然适合"一组同构对象批量生成样式"的场景，例如社交图标、网格列、按钮变体等。

Mixins：抽取可复用的样式块

如果发现同一段代码要在多个元素上重复书写，就应该把它存进 Mixin。使用@mixin指令加上名称定义，用@include加上名称调用。

无参数的 Mixin 示例——水平垂直居中：

@mixin center { display: block; margin-left: auto; margin-right: auto; left: 0; right: 0; } div { @include center; background-color: $primary-color; }

编译结果：

div { display: block; margin-left: auto; margin-right: auto; left: 0; right: 0; background-color: #A3A4FF; }

带参数的 Mixin 可以充当"快捷属性"——例如封装宽高声明，调用时传入width和height：

@mixin size($width, $height) { width: $width; height: $height; } .rectangle { @include size(100px, 60px); } .square { @include size(40px, 40px); }

编译结果：

.rectangle { width: 100px; height: 60px; } .square { width: 40px; height: 40px; }

Mixin 参数化的能力使它成为封装"带配置的样式片段"的首选工具，后文继承（@extend）一节还会讨论它与此的取舍。

函数（Functions）：内置函数与自定义函数

Sass 提供了大量内置函数，可完成各式各样的任务；调用方式与常规函数一致——写函数名并传入所需参数：

body { width: round(10.25px); } .footer { background-color: fade_out(#000000, 0.25); }

round()将数值四舍五入，fade_out()为颜色添加透明度。编译结果：

body { width: 10px; } .footer { background-color: rgba(0, 0, 0, 0.75); }

自定义函数用@function定义，与 Mixin 非常相似。选择依据是：Mixin 更适合生成 CSS，函数更适合承载贯穿 Sass 代码的逻辑计算——"数学运算"一节的例子正是改造成可复用函数的理想候选。教程给出的示例函数接收目标尺寸与父级尺寸，返回百分比：

@function calculate-percentage($target-size, $parent-size) { @return $target-size / $parent-size * 100%; } $main-content: calculate-percentage(600px, 960px); .main-content { width: $main-content; } .sidebar { width: calculate-percentage(300px, 960px); }

编译结果：

.main-content { width: 62.5%; } .sidebar { width: 31.25%; }

注意这里沿用了教程（以及经典 Sass 语法）的写法：在算术表达式中/作为除法运算符参与计算；自定义函数既可以在变量初始化时调用，也可以直接在属性值中调用。

继承（@extend）：在选择器间共享属性

@extend是一种让一个选择器共享另一个选择器属性的方式。教程示例：

.display { @include size(5em, 5em); border: 5px solid $secondary-color; } .display-success { @extend .display; border-color: #22df56; }

编译结果：

.display, .display-success { width: 5em; height: 5em; border: 5px solid #51527F; } .display-success { border-color: #22df56; }

教程特别强调：继承一条 CSS 语句通常优于为此创建 Mixin。原因是 Sass 会把共享同一套基础样式的类归并组合（如上面的.display, .display-success选择器组）；若改用 Mixin，width、height、border会在每个调用处重复输出一份。虽然这不影响工作流，但会不必要地撑大 Sass 编译器生成的文件体积。这一取舍是理解@extend设计动机的关键。

嵌套（Nesting）：选择器套选择器

Sass 允许在选择器内部嵌套选择器，配合父选择器引用符&还可以嵌套伪类：

ul { list-style-type: none; margin-top: 2em; li { background-color: red; &:hover { background-color: blue; } a { color: white; } } }

&会被替换为父选择器（此处为li），从而生成li:hover。编译结果：

ul { list-style-type: none; margin-top: 2em; } ul li { background-color: red; } ul li:hover { background-color: blue; } ul li a { color: white; }

教程同时给出实践告诫：过度嵌套会让代码更难维护，最佳实践建议嵌套不超过 3 层。嵌套应当服务于"表达 DOM 层级关系"这一目的，而非无节制地复制结构。

局部文件与 @import：模块化组织样式

Sass 允许创建局部文件（partials），帮助把 Sass 代码模块化。局部文件必须以_开头（例如_reset.css），并且不会被单独编译输出为 CSS——它们只作为被导入的原料存在。

教程假设存在一个_reset.css文件，内容如下：

html, body, ul, ol { margin: 0; padding: 0; }

通过@import将其导入主文件：

@import 'reset'; body { font-size: 16px; font-family: Helvetica, Arial, Sans-serif; }

注意导入时省略了_前缀与扩展名（'reset'即指向_reset.css）。Sass 的@import与原生 CSS 的@import有本质区别：它不会发起额外的 HTTP 请求去拉取文件，而是把被导入文件的代码直接合并进编译产物。编译结果：

html, body, ul, ol { margin: 0; padding: 0; } body { font-size: 16px; font-family: Helvetica, Arial, Sans-serif; }

占位符选择器（Placeholders）：只供继承、不出现在输出中

占位符在"创建一条仅供@extend使用的 CSS 语句"时非常有用。占位符以%开头（而非.或#），并且不会出现在编译后的 CSS 中：

%content-window { font-size: 14px; padding: 10px; color: #000; border-radius: 4px; } .message-window { @extend %content-window; background-color: #0000ff; }

编译结果：

.message-window { font-size: 14px; padding: 10px; color: #000; border-radius: 4px; } .message-window { background-color: #0000ff; }

对比普通类继承，占位符的最大收益是"零污染"：基础样式规则%content-window本身不会输出到 CSS，只有真正继承它的类才会携带这些属性，从源头避免了无用样式泄漏。

数学运算：直接在 SCSS 中算布局

Sass 提供+、-、*、/和%运算符，可以直接在 Sass 文件中计算数值，而无需手工预计算。教程用经典的两栏布局演示：

$content-area: 960px; $main-content: 600px; $sidebar-content: 300px; $main-size: $main-content / $content-area * 100%; $sidebar-size: $sidebar-content / $content-area * 100%; $gutter: 100% - ($main-size + $sidebar-size); body { width: 100%; } .main-content { width: $main-size; } .sidebar { width: $sidebar-size; } .gutter { width: $gutter; }

编译结果：

body { width: 100%; } .main-content { width: 62.5%; } .sidebar { width: 31.25%; } .gutter { width: 6.25%; }

把 960px 栅格拆成 62.5% 主栏、31.25% 侧栏与 6.25% 沟槽，百分比全部由编译期计算得出，日后调整任何一份尺寸，其余比例会自动随之更新。这正是"数学运算符"示例被教程点名推荐改造为可复用函数（如前面的calculate-percentage）的原因。

名称考据：Sass 还是 SASS？

语言的名字 "Sass" 是一个单词，不是缩写。由于人们总把它写作 "SASS"，语言作者开玩笑地称其为 "Syntactically Awesome StyleSheets"（语法上令人惊叹的样式表）。记住这一点有助于你在文档检索、社区讨论与代码注释中正确使用这一名称。

实践与兼容性

• 在线练习：想直接在浏览器里试玩 Sass，可以使用 SassMeister 这类在线工具，任意选择 Sass 或 SCSS 语法（在设置中切换）。
• 工程落地：只要项目中有一个能把 Sass 编译成 CSS 的程序，Sass 就可以用于任何项目。
• 浏览器兼容：编译产物依然是普通 CSS，因此你需要确认所使用的 CSS 特性与目标浏览器兼容——QuirksMode CSS 与 CanIUse 是业界常用的兼容性核查资源。

仓库视角：这份教程在 learnxinyminutes-docs 中如何组织与校验

learnxinyminutes-docs 是一个以"把文档写成可编译代码"为理念的教程仓库（见 README.md），所有语言教程遵循统一的体例：YAML frontmatter 声明元信息，正文以带注释的代码为主体、辅以极简文字说明（详见 CONTRIBUTING.md 的风格规范：示例优先于论述、惜字如金、代码块单行不超过 80 字符、统一 UTF-8 编码）。

本文依据的 es/sass.md 正是英文原版 sass.md 的西班牙语翻译，frontmatter 中通过contributors记录原作者（Laura Kyle、Sean Corrales、Kyle Mendes、Keith Miyake），通过translators记录译者（César Suárez），并为可下载代码片段声明filename。仓库中同一份 Sass 教程还提供了 zh-cn/sass.md、cs/sass.md、de/sass.md、ms/sass.md、pt-br/sass.md、vi/sass.md 等多语言版本，读者可对照阅读以验证示例一致性。

仓库还配套了两套自动化校验脚本，从侧面印证了这类文档的质量约束：

• lint/frontmatter.py 会解析每个 Markdown 文件的 YAML frontmatter，校验允许的键（name、where_x_eq_name、category、filename、contributors、translators）、值类型与条目格式；
• lint/encoding.sh 会批量检查所有.md文件的编码必须为 UTF-8 或 US-ASCII，且不允许携带 UTF-8 BOM。

延伸学习建议

把本文与仓库中的英文原版 sass.md 及 zh-cn/sass.md 对照阅读，可以同时检验语法理解与翻译准确性。上手路径建议：先在浏览器端在线工具中逐段粘贴本文代码观察编译输出，再在本地工程中建立_partials目录实践模块化组织，最后尝试把两栏布局示例封装成可复用的自定义函数。Sass 的官方文档与 The Sass Way 社区还提供从入门到进阶的系列教程，可作为系统深化的后续资料。

• 文档
• 教程