【CSS in Depth 2 精译_900】附录B：CSS 预处理器简介

当前内容所在位置（可进入专栏查看其他译好的章节内容）

• 【附录】 ✔️
  • 附录A：CSS 选择器参考
  • 附录B：CSS 预处理器简介 ✔️

《CSS in Depth》新版封面

译者按
本篇为全书第二篇附录，主要对 CSS 的预处理器做了一个概括性介绍，学完还是挺有收获的。新版附录不仅在内容上进行了必要的增补，学习时我认为最好跳出附录这个限制，从全篇的行文结构入手，看看作者是如何将一个内涵丰富的主题完整再现出来的，又是怎样构建他自己的知识体系的。附录其实也包含了 CSS 的部分关键信息，例如工程化的一些知识点，只是碍于全书论述范围，不便展开讨论罢了。提前学完附录，下一篇我们将正式进入全书第四部分的学习（包含第 11 ~ 14 章），敬请期待！

附录 B：预处理器 Preprocessors

对现代 CSS 工作流而言，预处理器的使用是必不可少的一环。预处理器不仅有助于提高代码书写效率，而且有利于基础代码的维护。例如，我们有时候只需要写几行代码，就可以在整个样式表中反复使用。

很多 CSS 特性功能，例如变量和嵌套语法，起初都是在预处理器中率先实现的，随后才被正式引入 CSS。在很多方面，预处理器都充当了试验场的重要角色，以供开发者们检验这些新功能的实用性；而 W3C 协会最终会将部分特性添加到 CSS 语言中。也正因为很多特性都得以在 CSS 中实现，预处理器的必要性也大不如前了；然而它们依旧很受欢迎，因此在考虑是否将其集成到项目中时，仍具有一定的价值。

预处理器的工作原理是把我们书写的源码文件转译为输出文件，即常规 CSS 样式表。大部分情况下，源码文件看上去和常规 CSS 差不多，只是增加了一些额外的功能。使用预处理器变量的一个简单示例如下：

$brand-blue: #0086b3;

a:link {
  color: $brand-blue;
}

.page-heading {
  font-size: 1.6rem;
  color: $brand-blue;
}

上述代码片段定义了一个名为 $brand-blue 的变量，并在样式表后面的两个不同位置进行调用。使用 Sass 预处理器运行的时候，整个样式表的变量都被替换了，得到以下 CSS 代码段：

a:link {
  color: #0086b3;
}

.page-heading {
  font-size: 1.6rem;
  color: #0086b3;
}

需要注意的是，对浏览器而言，由于最终输出的是常规 CSS，所以预处理器不会向 CSS 语言本身添加任何新特性。但对我们开发者而言，预处理器确实提供了许多便利。

在前面的例子中，通过变量来表示颜色值，就能多次重复使用它，而无需每次复制粘贴需要的十六进制编码。在生成输出 CSS 文件的过程中，预处理器帮我们完成了目标值的拷贝工作。这样就能实现在一个地方修改变量的值，整个样式表都会同步进行更新。

预处理器有很多种，其中最流行的两个分别是 Sass（http://sass-lang.com/）和 Less（http://lesscss.org/）。因为 Sass 是最为流行的预处理器，因此本附录也将基于 Sass 进行介绍。Less 与 Sass 类型，主要在一些语法细节上存在差异。例如，Sass 使用 $ 来表示变量（如 $brand-blue），而 Less 则使用 @ 符号（如 @brand-blue）。本附录中提到的所有 Sass 特性在 Less 中均支持。您也可以浏览 Less 的官方文档了解其语法上的差异。

B.1 Sass 预处理器（Sass）

Sass 提供了多种安装方式，具体根据您熟悉的语言或打包工具进行选择即可。如果熟悉 JavaScript 和 Node 环境，则可以通过 npm 包管理工具来进行安装。

如果本地还没安装 Node.js，可以浏览 Node.js 官网 https://nodejs.org/ 并根据提示下载安装。本节会给出必要的操作命令，如果想对 npm 有更多了解，或者遇到问题需要帮助，可以访问 npm 文档：https://docs.npmjs.com/about-npm。

B.1.1 Sass 的安装 Installing Sass

要安装 Sass，先要在命令终端新建一个项目目录并进入该目录，然后依次运行以下两条命令：

• npm init -y —— 初始化一个新的 npm 项目，并创建一个 package.json 文件。
• npm install --save-dev sass —— 安装 Sass 包，并将其作为开发依赖写入 package.json。

接着需要确认使用哪种语法。Sass 提供了两种语法：Sass 和 SCSS。它们的语言特性一样，但 Sass 语法去掉了所有的大括号和分号，并严格使用缩进来表示代码结构，例如：

body
  font-family: Helvetica, sans-serif
  color: black

该写法类似于 Ruby 和 Python 这样的编程语言，空格是有具体含义的。而 SCSS 语法则使用大括号和分号，因此看起来更像常规的 CSS，例如：

body {
  font-family: Helvetica, sans-serif;
  color: black;
}

SCSS 相对来讲更常用些。如果拿不准，建议选择 SCSS，这也是本附录中使用的语法。

说明

SCSS 文件扩展名为 .scss，而 Sass 文件的扩展名为 .sass。

B.1.2 Sass 的运行 Running Sass

完成 Sass 的安装后，就可以创建样式表了。先在项目目录新建两个子文件夹，文件名分别为 sass 和 build。我们会把源文件放到 sass 文件夹，然后利用 Sass 将其转成 CSS 文件并放入 build 文件夹。接着修改 package.json 文件，按照代码清单 B.1 同步更新 scripts 入口：

代码清单 B.1 为 package.json 添加一条 sass 命令

"scripts": {
  "sass": "sass sass/index.scss build/styles.css"
},

这样就定义了一条 sass 命令。运行时该命令会把 sass/index.scss 文件编译为 build/styles.css 文件。当前项目中还不存在 sass/index.scss 文件，先手动创建它，我们的 Sass 源码就写到这里面。然后运行命令 npm run sass，执行后就会生成（或者重新生成）build/styles.css 样式表文件。

提示

在 Webpack 或 Vite 这些常见的任务运行工具中，有一些现成的插件可供加载，例如 sass-loader。若想启用插件，也可以找一款支持 Sass 或者 Less 的插件集成到自己熟悉的工作流中。

B.1.3 理解 Sass 的核心特性 Understanding important Sass features

前面已经演示过 Sass 变量的用法了（即 $brand-blue）。将代码清单 B.2 中的源码添加到 index.scss 文件，看看 Sass 是如何编译的。

代码清单 B.2 关于 Sass 变量的示例代码

$brand-blue: #0086b3; /* 定义变量 */

a:link {
  color: $brand-blue; /* 使用变量 */
}
.page-heading {
  font-size: 1.6rem;
  color: $brand-blue; /* 使用变量 */
}

运行命令 npm run sass，就能将上述代码编译为对应的 CSS。其输出文件（即 build/styles.css）如下所示：

a:link {
  color: #0086b3;
}

.page-heading {
  font-size: 1.6rem;
  color: #0086b3;
}
/*# sourceMappingURL=styles.css.map */

可以看到，变量已经被替换为十六进制颜色值，可供浏览器直接运行。此外 Sass 还生成了一个源码映射文件，并在 CSS 样式表底部通过一行注释来标明该 源码映射（source map） 的路径。

源码映射的定义

源码映射（source map） 是一个特殊的文件；计算机可利用它来追踪每一行生成的代码（本例即为 CSS），并关联到生成该行代码的源代码位置（本例即 Sass 源代码）。该映射文件可以在一些调试工具中使用，包括浏览器的开发者工具（DevTools）。

1 行内计算 Inline computation

Sass 同样支持使用 +、-、*、/ 及 %（求模运算）。这样就能从某个初始值算得多个值：

代码清单 B.3 Sass 行内计算示例代码

$padding-left: 3em;

.note-author {
  left-padding: $padding-left; /* 使用变量 */
  font-weight: bold;
}

.note-body {
  left-padding: $padding-left * 2; /* 将变量乘以 2 */
}

运行 npm run sass 编译上述源码，会得到一下生成结果：

.note-author {
  left-padding: 3em;
  font-weight: bold;
}
.note-body {
  left-padding: 6em;
}

该特性在两个值相关但不同的时候特别有用。在本例中，无论 $padding-left 的值是多少，note-body 的左侧内边距始终为 note-author 的两倍。该功能也启发了 CSS 引入 calc() 函数。

2 嵌套选择器 Nested selectors

Sass 允许在代码块内嵌套选择器。这样就能通过嵌套将有关联的代码写到同一个代码块中，如代码清单 B.4 所示。

代码清单 B.4 嵌套选择器示例

.site-nav {
  display: flex;

  > li { /* 嵌套选择器 */
    margin-top: 0;

    &.is-active { /* & 符号用于指代外层选择器 */
      display: block;
    }
  }
}

Sass 会把外层声明块的选择器与嵌套选择器进行合并。编译上述示例代码得将到以下结果：

.site-nav {
  display: flex;
}

.site-nav > li {
  margin-top: 0;
}

.site-nav > li.is-active {
  font-weight: bold;
}

默认情况下，外层的 .site-nav 选择器会自动添加到编译代码的每个选择器前面，拼接的位置还会插入一个空格。要修改默认配置，可以使用 & 符号表示外层选择器将要插入的位置。

警告

嵌套语法会升高最终生成的选择器优先级。使用嵌套时务必当心，避免嵌套层级过深。

该写法与 CSS 中的嵌套语法非常类似，但也存在一些细微差别，例如，二者对选择器优先级的影响各不相同。具体情况详见本书第 8 章。另外，在启用 Sass 对 CSS 做预处理时，无法正常使用 CSS 的嵌套语法；Sass 会始终对存在嵌套的样式作扁平化处理（a flat structure）。

此外，还可以在声明块内嵌套媒体查询，这样就能避免反复书写相同的选择器，如代码清单 B.5 所示。

代码清单 B.5 嵌套媒体查询

html {
  font-size: 1rem;
  @media (min-width: 45em) { /* 声明块内的媒体查询 */
    font-size: 1.25rem;
  }
}

上述代码的编译结果如下：

html {
  font-size: 1rem;
}
@media (min-width: 45em) {
  html {
    font-size: 1.25rem;
  }
}

这样一来，如果要修改选择器，就不必再到媒体查询中修改对应的选择器了。

3 局部文件（@use） Partials (@use)

局部文件可以将样式分割成多个独立的文件，Sass 会把这些文件拼接在一起生成一个文件。利用局部文件可以按照自己的想法随意组织文件，但最终只提供给浏览器一个文件，从而减少网络请求的数量。

Sass 局部文件的命名按惯例常以一个下划线开头。在项目中创建一个新的源码文件并命名为 sass/_button.scss。然后将代码清单 B.6 中的样式添加到该文件中：

代码清单 B.6 按钮的局部文件示例样式代码

.button {
  padding: 1em 1.25em;
  background-color: #265559;
  color: #333;
}

然后在 index.scss 中使用 @use 规则引入上述局部样式表，写法如代码清单 B.7 所示。该代码片段须在样式表的开头位置添加；@use 只能在其他样式规则前引用。

代码清单 B.7 引入局部文件的写法

@use "button"; /* 注意局部文件的路径，没有写下划线 */

运行 Sass 时，局部文件会被编译，然后插入 @use 规则指定的位置。

我认为这是预处理器最重要的特性。随着样式表变得越来越大，滚动上千行代码去定位样式表中相关的部分会变得极其困难。有了这个特性就能将样式表拆分为小巧又不实逻辑完整性的一个个模块，并且还不会造成网络性能下降。更多细节介绍，详见本书第 9 章补充内容【预处理器和模块化 CSS】（译注：具体在 9.2 节）。

@use 规则还具有更为复杂的功能，包括命名空间和只导入局部文件的特定部分等等。更多详情，请参考 Sass 官方在线文档：https://sass-lang.com/guide/#modules。

4 混入 Mixins

混入（mixin) 是一小段 CSS 代码块，可以在样式表的任意位置复用。如果遇到某段特定文字样式需要在多个地方使用，或者作为可复用的通用样式，使用混入就非常合适。

混入通过 @mixin 规则来定义，并通过 @include 规则来完成调用。以下代码给出了混入的一个简单示例：

代码清单 B.8 Sass 中的混入语法示例

@mixin box { /* 定义一个名为 box 的混入 */
  border-radius: 5px;
  box-shadow: 5px 5px 10px rgb(0 0 0 / 0.1);
}

.main-tile { /* 调用该混入 */
  @include box;
  color: #333;
}

预处理器会提取 mixin 中的代码，并将其复制到 @include 规则所在的位置。最终编译生成的代码如下：

.main-tile {
  border-radius: 5px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  color: #333;
}

注意，最终编译生成的样式代码并没有 box 混入的身影。Sass 只是将混入的内容添加到了样式表调用它的位置。

您还可以定义带参数的混入，就像平时编程使用的函数那样。代码清单 B.9 给出了一个警示框的 mixin 混入示例。其中有两个参数 $color 和 $bg-color，它们都是在混入的作用域内定义的变量。

代码清单 B.9 带参数的 mixin 混入

@mixin alert-variant($color, $bg-color) { /* 定义一个包含两个参数的混入 */
  padding: 0.3em 0.5em;
  /* 参数变量可在混入内使用 */
  border: 1px solid $color;
  color: $color;
  background-color: $bg-color;
}
.alert-info {
  @include alert-variant(blue, lightblue) /* 将值传入 mixin 混入 */
}
.alert-danger {
  @include alert-variant(red, pink) /* 将值传入 mixin 混入 */
}

每次调用混入，都可以传递不同的值。这些值会相应赋给两个变量。上述代码片段最终输出的 CSS 如下：

.alert-info {
  padding: 0.3em 0.5em;
  border: 1px solid blue;
  color: blue;
  background-color: lightblue;
}
.alert-danger {
  padding: 0.3em 0.5em;
  border: 1px solid red;
  color: red;
  background-color: pink;
}

这样，混入又一次实现了同一段代码的复用，但在这种情况下，最终生成了两个不同的版本。生成的代码之所以不同，是因为传入的参数值本就不同。

5 继承 Extend

Sass 还支持 @extend 规则。它和 mixin 类似，只是编译方式有所不同。对于继承，Sass 不会多次复制相同的样式声明，而是把选择器组合在一起，这样它们就会包含同样的规则集。还是通过一个示例来说明最为合适。在代码清单 B.10 中，%message 包含的样式规则继承到了另两个规则集中。

代码清单 B.10 基础样式类的继承

%message {
  padding: 0.3em 0.5em;
  border-radius: 0.5em;
}

.message-info {
  @extend %message; /* 共享 .message 类中的样式 */
  color: blue;
  background-color: lightblue;
}

.message-danger {
  @extend %message; /* 共享 .message 类中的样式 */
  color: red;
  background-color: pink;
}

上述代码编译后的结果如下：

.message-info,
.message-danger {
  padding: 0.3em 0.5em;
  border-radius: 0.5em;
}
.message-info {
  color: blue;
  background-color: lightblue;
}
.message-danger {
  color: red;
  background-color: pink;
}

注意，Sass 将 .message-info 和 .messag-danger 选择器复制到了第一个规则集上。

警告

@extend 不同于 mixin，它会把选择器移动到样式表中更靠前的位置。这意味着我们书写的源码的最终顺序可能跟预期不完全相同，这样可能会影响样式叠加的效果。

@extend 的输出长度通常会比 mixin 短一些。这是显而易见的，也很容易想到 @extend 更好一些，因为它最终输出的样式表更轻量（因此网络传输速度更快）。但同时也要知道，mixin 产生的大量重复代码，可以通过 gzip 得到很好地压缩。只要服务器使用 gzip 压缩处理过所有的网络流量（也理应这样处理），最终增加的重复代码会比预期小很多。

但也不要为了性能优化就完全放弃 mixin、只用 @extend。要综合考虑代码的组织方式，看看 mixin 和 extend 谁更合适。通常情况下，您可能更倾向于用 mixin。

6 颜色的处理 Color manipulation

Sass 还有个不错的特性，它提供了一系列处理颜色的函数。如果需要两个同类型的颜色（例如，同一种绿色下的深浅两个版本），就可以使用代码清单 B.11 中的函数来生成。

代码清单 B.11 Sass 颜色函数的用法示例

$green: #63a35c;

$green-dark: darken($green, 10%); /* 加深 10% */
$green-light: lighten($green, 10%); /* 淡化 10% */

/* 饱和度调整 */
$green-vivid: saturate($green, 20%);
$green-dull: desaturate($green, 20%);

/* 在色相环上旋转颜色 */
$purple: adjust-hue($green, 180deg);
$yellow: adjust-hue($green, -70deg);

通过这些函数，您就能修改颜色中的某个变量，并且同步修改与之相关联的其他颜色值。这样就不必把所有颜色都存入变量中，而是在需要的属性（property）上直接修改，例如：

.page-header {
  color: $green;
  background-color: lighten($green, 50%);
}

如果需要实现更多高级操作，还有一些其他的颜色函数，可以参考这篇文章：A visual guide to Sass & Compass Color Functions。注意，CSS 颜色操作函数通常更加强大，并且已经在浏览器中获得了支持（详见本书第 11 章），但使用 Sass 提供的版本可以不同考虑浏览器兼容问题。

7 循环 Loops

针对某个值使用循环，可以生成一系列细小的变化。在第 16 章中介绍了几个 :nth-child() 选择器来匹配连续的菜单元素，然后为每个元素添加不同的 transition-delay（详见代码清单 16.11）。这类代码可以更轻松地通过 Sass 循环来实现，需要使用 @for 规则，如代码清单 B.12 所示。

代码清单 B.12 迭代一组取值

@for $index from 2 to 5 { /* 由 2 到 4 遍历 $index 的值 */
  .nav-links > li:nth-child(#{$index}) { /* 在选择器中使用变量 */
    transition-delay: (0.1s * $index) – 0.1s; /* 令变量乘以某时间值 */
  }
}

这样就把相同的代码块输出了好几遍，每次变量 $index 的值都会增加。我们在选择器中使用了该变量，并通过 #{} 的写法进行转义。最终编译后的 CSS 代码如下：

.nav-links > li:nth-child(2) {
  transition-delay: 0.1s;
}
.nav-links > li:nth-child(3) {
  transition-delay: 0.2s;
}
.nav-links > li:nth-child(4) {
  transition-delay: 0.3s;
}

在原生 CSS 中，修改这样的代码往往较为繁琐。比如要将 transition-delay 属性改为每次增加 0.15 秒，就得分别将每个声明手动改为 0.15 秒、0.3 秒和 0.45 秒；若要再添加一组重复动作，就得手动复制代码然后依次修改所有值。而现在有了 Sass 循环，只需编辑数学公式或者修改迭代次数就能轻松搞定。

8 它还是 CSS（It’s all CSS ）

预处理器不会修改 CSS 的基本原理。我在整本书中讲到的内容依然全部适用。之所有没有贯穿全书使用 Sass，是因为我希望书中讲解的所有话题都是这门语言本身自带的知识点，而不是某个特定的预处理器。即便要使用 Sass，也依然需要深入理解 CSS；但 Sass（或者 Less）可以完成原生 CSS 中绝大部分比较费时费力的苦差事。

B.2 PostCSS

PostCSS（https://postcss.org/）是另一种类型的预处理器。它同样需要编译源文件并输出一个处理过的 CSS 文件，这一点与 Sass 或 Less 类似；但 PostCSS 是完全依赖插件工作的。如果没有安装相关插件（plugins），输出文件就是没有任何变化的源文件副本。

您能从 PostCSS 实现什么功能，完全取决于您使用哪些插件。您可以使用多个插件，使其具备和 Sass 一样的功能；也可以只用一两个插件，并同时启用 Sass 和 Less 运行代码。如有必要，甚至可以用 JavaScript 编写自己的插件。

这当中有一点很关键：PostCSS 运行插件需要考虑顺序。如果配置了多个插件，它们的执行顺序有时候对最终结果影响很大，可能需要反复试验才能让 PostCSS 实现预期的工作方式。具体配置方法可以参考 PostCSS 文档。

B.2.1 使用前缀自动补全工具 Autoprefixer

PostCSS 中最重要的插件可能就是 Autoprefixer 了。该插件可以将相关的所有浏览器前缀都添加到 CSS 中。想要了解更多有关浏览器前缀的信息，可以参考本书第 14 章介绍的扩展知识 “浏览器前缀”（“Vendor prefixes”）。

如果您的源代码如下所示：

.example {
  backdrop-filter: blur(5px);
  mask-image: url(star-mask.png);
}

Autoprefixer 就会添加额外的样式声明，为旧版浏览器提供带前缀的回退写法，输出以下代码：

.example {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask-image: url(images/star-mask.png);
  mask-image: url(images/star-mask.png);
}

如果要手动补全所有的浏览器前缀，既耗时又容易出错。同时源码中会增加大量的无意义代码，因为不需要过多关注这些带浏览器前缀的 CSS 如何运行。

您可以为 Autoprefixer 配置想要支持的浏览器列表，这样它就能根据需要自动添加浏览器前缀来支持这些浏览器。例如，使用数组 ["last 3"] 来进行配置，就可以确保您的代码与主流浏览器的最新三个版本兼容（如果可行的话）。Autoprefixer 使用 Can I Use 网站（caniuse.com）数据库中的最新数据来确定何时需要添加前缀。

B.2.2 使用 cssnano

cssnano（https://cssnano.github.io/cssnano/）是一款基于 PostCSS 的压缩工具。压缩工具（minifier） 可以从代码中剥离所有无关的空格，使代码体积尽可能变小，但同时依然保持相同的语法含义。

注意

压缩工具不能代替 gzip 压缩，gzip 压缩功能应当由服务器提供。一般来说，最好是对 CSS 同时使用体积压缩和 gzip 压缩，这样可以加快网络加载时间。

CSS 压缩工具有很多种，但将其作为 PostCSS 构建过程中的一部分而非单独的步骤，显然更有意义。cssnano 就能满足这一需求。

B.3 Lightning CSS

Lightning CSS（https://lightningcss.dev/）是一款相对较新的 CSS 工具，它包含了前面介绍的许多功能，并将所有功能集成到一个工具中，例如：预处理器相关的便捷功能、自动补全浏览器前缀的功能以及压缩功能。此外，Lightning CSS 还为许多尚未得到浏览器广泛支持的 CSS 新特性提供了预处理支持，例如样式嵌套、宽色域颜色函数支持、以及支持小于（<）和大于（>）符号写法的新版媒体查询语法等。

最重要的是，Lightning CSS 具有高度的可配置性，因此当您感觉原生浏览器的兼容情况足够可靠时，大可禁用这些功能而无需经过转义环节。强烈推荐您查阅 Lightning CSS 相关文档，获取现有功能完整列表。

此外，Lightning CSS 还可以帮你压缩 CSS，并根据您的配置添加浏览器相应前缀。要是源代码中存在不必要或者过时的浏览器前缀，Lightning CSS 甚至还能将其删除。它还支持通过 @import 规则引入局部文件（partials），与 Sass 类似。

CSS 在过去几年中取得了长足的进步，今后这些工具可能也会过气，但我认为这一天还没那么快到来。在开始一个项目时，认真考虑您的工具集至关重要。本附录列出的所有预处理工具都得到了业内普遍认可。花时间去了解每个工具所具备的功能是很有必要的，这样才知道哪款工具（如果存在的话）最契合您的需求。

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：

• 第一章 层叠、优先级与继承（已完结）
  • 1.1 层叠
  • 1.2 继承
  • 1.3 特殊值
  • 1.4 简写属性
  • 1.5 CSS 渐进式增强技术
  • 1.6 本章小结
• 第二章 相对单位（已完结）
  • 2.1 相对单位的威力
  • 2.2 em 与 rem
  • 2.3 告别像素思维
  • 2.4 视口的相对单位
  • 2.5 无单位的数值与行高
  • 2.6 自定义属性
  • 2.7 本章小结
• 第三章 文档流与盒模型（已完结）
  • 3.1 常规文档流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 负的外边距
  • 3.5 外边距折叠
  • 3.6 容器内的元素间距问题
  • 3.7 本章小结
• 第四章 Flexbox 布局（已完结）
  • 4.1 Flexbox 布局原理
  • 4.2 弹性子元素的大小
  • 4.3 弹性布局的方向
  • 4.4 对齐、间距等细节处
  • 4.5 本章小结
• 第五章 网格布局（已完结）
  • 5.1 构建基础网格
  • 5.2 网格结构剖析 （上）
    • 5.2.1 网格线的编号（下）
    • 5.2.2 网格与 Flexbox 配合（下）
  • 5.3 两种替代语法
    • 5.3.1 命名网格线
    • 5.3.2 命名网格区域
  • 5.4 显式网格与隐式网格（上）
    • 5.4.1 添加变化 （中）
    • 5.4.2 让网格元素填满网格轨道（下）
  • 5.5 子网格（全新增补内容）
  • 5.6 对齐相关的属性
  • 5.7 本章小结
• 第六章 定位与堆叠上下文（已完结）
  • 6.1 固定定位
    • 6.1.1 创建一个固定定位的模态对话框
    • 6.1.2 在模态对话框打开时防止屏幕滚动
    • 6.1.3 控制定位元素的大小
  • 6.2 绝对定位
    • 6.2.1 关闭按钮的绝对定位
    • 6.2.2 伪元素的定位问题
  • 6.3 相对定位
    • 6.3.1 创建下拉菜单（上）
    • 6.3.2 创建 CSS 三角形（下）
  • 6.4 堆叠上下文与 z-index
    • 6.4.1 理解渲染过程与堆叠顺序（上）
    • 6.4.2 用 z-index 控制堆叠顺序（上）
    • 6.4.3 深入理解堆叠上下文（下）
  • 6.5 粘性定位
  • 6.6 本章小结
• 第七章 响应式设计（已完结）
  • 7.1 移动端优先设计原则（上篇）
    • 7.1.1 创建移动端菜单（下篇）
    • 7.1.2 给视口添加 meta 标签（下篇）
  • 7.2 媒体查询（上篇）
    • 7.2.1 深入理解媒体查询的类型（上篇）
    • 7.2.2 页面断点的添加（中篇）
    • 7.2.3 响应式列的添加（下篇）
  • 7.3 流式布局
  • 7.4 响应式图片
  • 7.5 本章小结
• 第八章 层叠图层及其嵌套
  • 8.1 用 layer 图层来操控层叠规则（上篇）
    • 8.1.1 图层的定义（上篇）
    • 8.1.2 图层的顺序与优先级（下篇）
    • 8.1.3 revert-layer 关键字（下篇）
  • 8.2 层叠图层的推荐组织方案
  • 8.3 伪类 :is() 和 :where() 的用法
  • 8.4 CSS 嵌套的使用
    • 8.4.1 嵌套选择器的使用
    • 8.4.2 深入理解嵌套选择器
    • 8.4.3 媒体查询及其他 @规则 的嵌套
  • 8.5 本章小结
• 第九章 CSS 的模块化与作用域
  • 9.1 模块的定义
    • 9.1.1 模块和全局样式
    • 9.1.2 一个简单的 CSS 模块
    • 9.1.3 模块的变体
    • 9.1.4 多元素模块
  • 9.2 将模块组合为更大的结构
    • 9.2.1 模块中多个职责的拆分
    • 9.2.2 模块的命名
  • 9.3 CSS 的作用域
    • 9.3.1 CSS 作用域的就近原则
    • 9.3.2 划定作用域的边界
    • 9.3.3 CSS 中的隐式作用域
    • 9.3.4 关于 CSS 作用域与层叠图层
  • 9.4 CSS 模式库
  • 9.5 本章小结
• 第十章 CSS 容器查询
  • 10.1 容器查询的一个简单示例
    • 10.1.1 容器尺寸查询的用法
  • 10.2 深入理解容器
    • 10.2.1 容器的类型
    • 10.2.2 容器的名称
    • 10.2.3 容器与模块化 CSS
  • 10.3 与容器相关的单位
  • 10.4 容器样式查询的用法
    • 10.4.1 将模块与所在容器解耦
    • 10.4.2 减少重复代码
  • 10.5 本章小结