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

Question

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

$color: #000;

.box {
    color: $color;
}

输出到：

.box {
  color: black;
}

不应输出十六进制值？

Answer 1

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

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

Sass 3.3及以上

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

$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()或darken()等颜色处理功能。