scss 文件里的特殊符号 - % 百分号和 $美元符号

看一个 SAP Spartacus UI 中的具体例子：

第一行的 @import './facet', 实际上导入的是 _facet.scss 文件。

第 11行 的 即美元符号定义的这个标识符看成是编程语言中的变量。

它又被 $product-components-allowlist 引用：

这个 mergeAll 的作用：

注意 !default 的含义：

!default 是一个 Sass 标志，指示对变量的条件赋值 — 它仅在变量先前未定义或为空时才赋值。 考虑这个代码片段：

$variable: 'test' !default;

将 variable 之前尚未被分配值。

另一个例子：

css $variable: 'hello world'; $variable: 'test' !default; // $variable still containshello world`

运行这两行之后，$variable 的值仍然是第 1 行原始赋值的 'hello world'。在这种情况下，第 2 行的 !default 赋值被忽略，因为已经提供了一个值，并且没有默认值 是需要的。

再来看 scss 文件里的百分号。

起的是占位符，place holder 的作用。

Sass 有一种特殊的选择器，称为“占位符”。 它看起来和行为很像“类选择器”，但它以 % 开头，并且不包含在 CSS 输出中。 事实上，任何包含占位符选择器的复杂选择器（逗号之间的选择器）都不包含在最终输出的 CSS 中。

既然不包含在最后输出的 css 中，那这些占位符选择器有什么用处？答案是作为扩展(extension)之用。

与类选择器不同，占位符如果没有被扩展，就不会污染 CSS，也不会强制库的用户在其 HTML 中使用特定的类名。

看个具体的例子：

```css
%toolbelt {
  box-sizing: border-box;
  border-top: 1px rgba(#000, .12) solid;
  padding: 16px 0;
  width: 100%;

  &:hover { border: 2px rgba(#000, .5) solid; }
}

.action-buttons {
  @extend %toolbelt;
  color: #4285f4;
}

.reset-buttons {
  @extend %toolbelt;
  color: #cddc39;
}

可以看到，我们用 %toolbet 定义了一个占位符，首先这个 %toolbet 的内容，不会出现在最终的 css 输出文件中，但是，我们可以定义新的 css 类，然后使用 @extend 去扩展这个占位符。

上图的 reset-buttons 和 .action-buttons, 就分别扩展了 %toolbet 并且重新定义了 color 的值。

最后生成的 css 代码：

更多Jerry的原创文章，尽在："汪子熙":