【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 差不多，只是增加了一些额外的功能。利用预处置惩罚器变量的一个简单示比方下：

1. $brand-blue: #0086b3;
3. a:link {
4.   color: $brand-blue;
5. }
7. .page-heading {
8.   font-size: 1.6rem;
9.   color: $brand-blue;
10. }

复制代码

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

1. a:link {
2.   color: #0086b3;
3. }
5. .page-heading {
6.   font-size: 1.6rem;
7.   color: #0086b3;
8. }

复制代码

必要留意的是，对浏览器而言，由于终极输出的是常规 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 语法去掉了全部的大括号和分号，并严格利用缩进来表示代码结构，比方：

1. body
2.   font-family: Helvetica, sans-serif
3.   color: black

复制代码

该写法类似于 Ruby 和 Python 如许的编程语言，空格是有详细含义的。而 SCSS 语法则利用大括号和分号，因此看起来更像常规的 CSS，比方：

1. body {
2.   font-family: Helvetica, sans-serif;
3.   color: black;
4. }

复制代码

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 下令

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

复制代码

如许就定义了一条 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 变量的示例代码

1. $brand-blue: #0086b3; /* 定义变量 */
3. a:link {
4.   color: $brand-blue; /* 使用变量 */
5. }
6. .page-heading {
7.   font-size: 1.6rem;
8.   color: $brand-blue; /* 使用变量 */
9. }

复制代码

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

1. a:link {
2.   color: #0086b3;
3. }
5. .page-heading {
6.   font-size: 1.6rem;
7.   color: #0086b3;
8. }
9. /*# sourceMappingURL=styles.css.map */

复制代码

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


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

Sass 同样支持利用 +、-、*、/ 及 %（求模运算）。如许就能从某个初始值算得多个值：
代码清单 B.3 Sass 行内计算示例代码

1. $padding-left: 3em;
3. .note-author {
4.   left-padding: $padding-left; /* 使用变量 */
5.   font-weight: bold;
6. }
8. .note-body {
9.   left-padding: $padding-left * 2; /* 将变量乘以 2 */
10. }

复制代码

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

1. .note-author {
2.   left-padding: 3em;
3.   font-weight: bold;
4. }
5. .note-body {
6.   left-padding: 6em;
7. }

复制代码

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

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

1. .site-nav {
2.   display: flex;
4.   > li { /* 嵌套选择器 */
5.     margin-top: 0;
7.     &.is-active { /* & 符号用于指代外层选择器 */
8.       display: block;
9.     }
10.   }
11. }

复制代码

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

1. .site-nav {
2.   display: flex;
3. }
5. .site-nav > li {
6.   margin-top: 0;
7. }
9. .site-nav > li.is-active {
10.   font-weight: bold;
11. }

复制代码

默认情况下，外层的 .site-nav 选择器会自动添加到编译代码的每个选择器前面，拼接的位置还会插入一个空格。要修改默认配置，可以利用 & 符号表示外层选择器将要插入的位置。
   告诫
  嵌套语法会升高终极天生的选择器优先级。利用嵌套时务必当心，避免嵌套层级过深。
  该写法与 CSS 中的嵌套语法非常类似，但也存在一些细微差别，比方，二者对选择器优先级的影响各不相同。详细情况详见本书第 8 章。别的，在启用 Sass 对 CSS 做预处置惩罚时，无法正常利用 CSS 的嵌套语法；Sass 会始终对存在嵌套的样式作扁平化处置惩罚（a flat structure）。
此外，还可以在声明块内嵌套媒体查询，如许就能避免反复书写相同的选择器，如代码清单 B.5 所示。
代码清单 B.5 嵌套媒体查询

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

复制代码

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

1. html {
2.   font-size: 1rem;
3. }
4. @media (min-width: 45em) {
5.   html {
6.     font-size: 1.25rem;
7.   }
8. }

复制代码

如许一来，如果要修改选择器，就不必再到媒体查询中修改对应的选择器了。
3 局部文件（@use） Partials (@use)

局部文件可以将样式分割成多个独立的文件，Sass 会把这些文件拼接在一起天生一个文件。利用局部文件可以按照自己的想法随意组织文件，但终极只提供给浏览器一个文件，从而减少网络哀求的数量。
Sass 局部文件的命名按惯例常以一个下划线开头。在项目中创建一个新的源码文件并命名为 sass/_button.scss。然后将代码清单 B.6 中的样式添加到该文件中：
代码清单 B.6 按钮的局部文件示例样式代码

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

复制代码

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

1. @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 中的混入语法示例

1. @mixin box { /* 定义一个名为 box 的混入 */
2.   border-radius: 5px;
3.   box-shadow: 5px 5px 10px rgb(0 0 0 / 0.1);
4. }
6. .main-tile { /* 调用该混入 */
7.   @include box;
8.   color: #333;
9. }

复制代码

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

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

复制代码

留意，终极编译天生的样式代码并没有 box 混入的身影。Sass 只是将混入的内容添加到了样式表调用它的位置。
您还可以定义带参数的混入，就像平时编程利用的函数那样。代码清单 B.9 给出了一个警示框的 mixin 混入示例。其中有两个参数 $color 和 $bg-color，它们都是在混入的作用域内定义的变量。
代码清单 B.9 带参数的 mixin 混入

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

复制代码

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

1. .alert-info {
2.   padding: 0.3em 0.5em;
3.   border: 1px solid blue;
4.   color: blue;
5.   background-color: lightblue;
6. }
7. .alert-danger {
8.   padding: 0.3em 0.5em;
9.   border: 1px solid red;
10.   color: red;
11.   background-color: pink;
12. }

复制代码

如许，混入又一次实现了同一段代码的复用，但在这种情况下，终极天生了两个不同的版本。天生的代码之所以不同，是由于传入的参数值本就不同。
5 继续 Extend

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

1. %message {
2.   padding: 0.3em 0.5em;
3.   border-radius: 0.5em;
4. }
6. .message-info {
7.   @extend %message; /* 共享 .message 类中的样式 */
8.   color: blue;
9.   background-color: lightblue;
10. }
12. .message-danger {
13.   @extend %message; /* 共享 .message 类中的样式 */
14.   color: red;
15.   background-color: pink;
16. }

复制代码

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

1. .message-info,
2. .message-danger {
3.   padding: 0.3em 0.5em;
4.   border-radius: 0.5em;
5. }
6. .message-info {
7.   color: blue;
8.   background-color: lightblue;
9. }
10. .message-danger {
11.   color: red;
12.   background-color: pink;
13. }

复制代码

留意，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 颜色函数的用法示例

1. $green: #63a35c;
3. $green-dark: darken($green, 10%); /* 加深 10% */
4. $green-light: lighten($green, 10%); /* 淡化 10% */
6. /* 饱和度调整 */
7. $green-vivid: saturate($green, 20%);
8. $green-dull: desaturate($green, 20%);
10. /* 在色相环上旋转颜色 */
11. $purple: adjust-hue($green, 180deg);
12. $yellow: adjust-hue($green, -70deg);

复制代码

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

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

复制代码

如果必要实现更多高级操作，另有一些其他的颜色函数，可以参考这篇文章：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 迭代一组取值

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

复制代码

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

1. .nav-links > li:nth-child(2) {
2.   transition-delay: 0.1s;
3. }
4. .nav-links > li:nth-child(3) {
5.   transition-delay: 0.2s;
6. }
7. .nav-links > li:nth-child(4) {
8.   transition-delay: 0.3s;
9. }

复制代码

在原生 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”）。
如果您的源代码如下所示：

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

复制代码

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

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

复制代码

如果要手动补全全部的浏览器前缀，既耗时又容易堕落。同时源码中会增加大量的无意义代码，由于不必要过多关注这些带浏览器前缀的 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》）
  第 1 版第 2 版读者评分原版：4.7（亚马逊）；中文版：9.3（豆瓣）原版：5.0（亚马逊）；中文版：暂无，待出版出版时间原版：2018 年 3 月；中文版：2020 年 4 月原版：2024 年 7 月；中文版：暂无，待出版原价原版：$44.99；中文版：￥139.00原版：$59.99；中文版：暂无，待出版现价原版：$36.49；中文版：￥52.54 起步原版：$52.09；中文版：暂无，待出版原版国内预订起步价 ￥461.00起步价 ￥750.00 本专栏为该书第 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 本章小结
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。