CSS Academy · 课时

变量、嵌套与局部文件

Q: 「变量、嵌套与局部文件」这节课中我会学到什么？

使用 Sass 变量保存可复用值，通过嵌套选择器提升可读性，并将代码拆分为局部文件。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Sass 变量保存可复用值，通过嵌套选择器提升可读性，并将代码拆分为局部文件。

变量、嵌套与局部文件 是 CoddyKit 上的免费 CSS Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 Sass

Sass（语法超棒的样式表）是一种 CSS 预处理器，为 CSS 增加了变量、嵌套、混入、函数等功能。Sass 文件会编译为标准 CSS。

Sass 的两种语法

Sass 有两种文件格式：

.scss — 与 CSS 兼容的超集语法（最常用）
.sass — 基于缩进的语法（没有花括号或分号）

本课程介绍 SCSS。

Sass 变量

Sass 变量使用 $ 前缀。它们在编译时解析——与 CSS 自定义属性不同，它们在浏览器中不是实时的。

<button class="button">Sass Variables</button>

Sass 变量与 CSS 自定义属性

主要区别：

Sass 变量：在编译时确定；不会出现在浏览器中；无法在运行时更改
CSS 自定义属性：在浏览器中实时生效；可以通过 JS 更改；参与级联

现代实践是两者结合使用：Sass 变量用于构建时逻辑；CSS 自定义属性用于运行时主题设置。

嵌套

Sass 允许将选择器嵌套在彼此内部，从而映射 HTML 结构。编译后的输出使用后代选择器。

<div class="card">
    <div class="card-title">Card title</div>
    <div class="card-body">Card body text</div>
  </div>

& 父选择器

& 表示父选择器，可用于实现类似 BEM 的模式和状态选择器：

<button class="button">Button</button>
  <button class="button active">Active state (font-weight: bold)</button>
  <button class="button--primary">BEM modifier: button--primary</button>
  <span class="button__icon">&#128279;</span> BEM element: button__icon

嵌套深度警告

请避免嵌套超过 3 层。过深的嵌套会生成特异性过高的选择器，使 CSS 难以维护。如果您发现自己需要深度嵌套，说明 CSS 架构可能需要重构。

Sass 局部文件

局部文件是名称以下划线开头的 Sass 文件（_card.scss）。局部文件不会单独编译，而必须导入另一个文件。这样可以避免生成不需要的 CSS 输出文件。

使用 @use 导入

现代 Sass 使用 @use 导入局部文件。它提供命名空间机制，可以避免变量冲突：

<h2 class="heading">Namespaced heading (t.$primary-color)</h2>

使用 @forward 构建库

@forward 会重新导出模块成员，使导入您所构建库的文件能够使用这些成员：

<span class="badge">Forwarded token (lib.$primary-color)</span>

旧版 @import（已弃用）

较旧的 @import 指令已在 Dart Sass 中弃用。请迁移到 @use 和 @forward，以获得更好的命名空间管理和性能。

快速检查

对于嵌套的 .nav { .link { color: white; } }，Sass 会生成什么 CSS 选择器？

回顾

Sass 变量（$name）在编译时解析。嵌套会映射 HTML 结构，但应避免超过 3 层。& 引用父选择器，可用于伪类、状态和 BEM 修饰符。局部文件（_file.scss）会被导入，而不是直接编译。现代 Sass 模块加载应使用 @use（而不是 @import）。

常见问题解答

「变量、嵌套与局部文件」课时是免费的吗？

是的 — 「变量、嵌套与局部文件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「变量、嵌套与局部文件」这节课中我会学到什么？

使用 Sass 变量保存可复用值，通过嵌套选择器提升可读性，并将代码拆分为局部文件。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「变量、嵌套与局部文件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy