为什么 Sass 会改变我的颜色格式? [英] Why does Sass change the format of my colors?

问题描述

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

Sass is outputting #000 and #fff as black and white color values in my css file. For example:

$color: #000;

.box {
    color: $color;
}

输出到:

.box {
  color: black;
}

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

Shouldn't output the hex values?

推荐答案

Sass 处理颜色的方式因您使用的版本而异.但是有一些常见的行为:

How Sass treats colors varies depending on what version you're using. But there are a few common behaviors:

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

• Sass will always maximize backwards compatibility whenever possible. Since keyword, hex, and rgba have the broadest browser support, all colors will be converted to one of those 3 formats, prioritizing towards either the keyword or hex. The rgba format will only be used if the color has alpha transparency (if you specify rgba(0, 0, 0, 100), Sass will convert it to either black or #000)
• If Sass has to choose between using the keyword or hex formats, the one it will use will depend on the output settings. The compact or compressed modes will always convert to hex, the other formats will use the keyword.
• Sass will convert hex colors to their 3-digit format in compressed mode (eg. #000000 will be output as #000).

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

Sass only converts colors when they are used as variables or if they are not in one of the 3 formats as described above:

$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 格式以外的其他格式.

Sass 3.4 and later

The only change from 3.3 to 3.4 is that when using variables, Sass will preserve the format of your color... unless it is in something other than the keyword, hex, or rgba formats.

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

但是如果我真的需要一个特定的格式怎么办?

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

But what if I really need a specific format?

If you absolutely must have a specific format, you can turn it into a string:

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

输出:

.foo {
  color: #F00;
}

请记住，当您执行此操作时，您的颜色"将不适用于 lighten() 或 darken() 等颜色操作函数.

Just keep in mind that when you do this, your "color" will not work with color manipulation functions like lighten() or darken().

这篇关于为什么 Sass 会改变我的颜色格式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！