sass - 为什么 Sass 会改变我的颜色格式？

Question

Sass 在我的 css 文件中输出 #000 和 #fff 作为黑白颜色值。例如：

$color: #000;

.box {
    color: $color;
}

输出到：

.box {
  color: black;
}

不应该输出十六进制值吗？

Answer 1

Sass 如何处理颜色取决于您使用的版本。但是有一些常见的行为：

• Sass总是尽可能地最大化向后兼容性。由于关键字、十六进制和rgba具有最广泛的浏览器支持，所有颜色都将转换为这 3 种格式之一，优先考虑关键字或十六进制。只有当颜色具有 alpha 透明度时才会使用 rgba 格式（如果您指定rgba(0, 0, 0, 100)，Sass 会将其转换为black或#000）
• 如果 Sass 必须在使用关键字或十六进制格式之间进行选择，它将使用哪种格式将取决于输出设置。紧凑或压缩模式将始终转换为十六进制，其他格式将使用关键字。
• Sass 将在压缩模式下将十六进制颜色转换为它们的 3 位格式（例如，#000000将输出为#000）。

Sass 3.3 及以上版本

Sass仅在将颜色用作变量或它们不是上述 3 种格式之一时才转换颜色：

$color-hex: #000000;
$color-keyword: black;
$color-rgb: rgb(0, 0, 0);
$color-hsl: hsl(0, 0, 0);

.box-hex {
    color: $color-hex;
    background: #000000;
}

.box-keyword {
    color: $color-keyword;
    background: black;
}

.box-rgb {
    color: $color-rgb;
    background: rgb(0, 0, 0);
}

.box-hsl {
    color: $color-hsl;
    background: hsl(0, 0, 0);
}

输出：

.box-hex {
  color: black;
  background: #000000;
}

.box-keyword {
  color: black;
  background: black;
}

.box-rgb {
  color: black;
  background: black;
}

.box-hsl {
  color: black;
  background: black;
}

Sass 3.4 及更高版本

从 3.3 到 3.4 的唯一变化是，当使用变量时，Sass 将保留颜色的格式……除非它是关键字、十六进制或 rgba 格式以外的格式。

.box-hex {
  color: #000000;
  background: #000000;
}

但是，如果我真的需要特定格式怎么办？

如果你绝对必须有一个特定的格式，你可以把它变成一个字符串：

$color: #{'#F00'}; // or `unquote('#F00')`
.foo {
    color: $color;
}

输出：

.foo {
  color: #F00;
}

请记住，当您执行此操作时，您的“颜色”将不适用于诸如lighten()or之类的颜色操作函数darken()。