为什么萨斯改变我的色彩格式？(Why does Sass change the format of

萨斯在我的CSS文件输出＃000和#FFF为黑色和白色的颜色值。 例如：

$color: #000;

.box {
    color: $color;
}

输出为：

.box {
  color: black;
}

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

Answer 1:

萨斯如何处理颜色取决于你使用的是什么版本的不同而不同。 但也有一些共同的行为：

• 萨斯总是最大限度的向后兼容性只要有可能。 由于关键字 ， 十六进制和RGBA具有最广泛的浏览器支持，所有颜色将被转换为的那些3种格式中的一种，或者朝向所述关键字或十六进制优先。 如果颜色有alpha透明（如果指定RGBA格式将只用于rgba(0, 0, 0, 100)萨斯将其转换为任何black或#000 ）
• 如果萨斯具有使用关键字或十六进制格式之间进行选择，它将使用一个将取决于输出设置。 紧凑型或压缩模式将始终转换为十六进制，其他的格式都使用关键字。
• 萨斯将十六进制颜色转换为压缩模式的3位数字格式（例如， #000000将作为输出#000 ）。

青菜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;
}

青菜3.4及更高版本

从3.3到3.4的唯一变化是，使用变量时，萨斯将保留您的色彩格式...除非它是比关键字，十六进制或RGBA格式以外的东西。

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

但是，如果我真的需要一个特定的格式？

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

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

输出：

.foo {
  color: #F00;
}

请记住，当你这样做，你的“色”不会与色彩处理功能，如工作lighten()或darken()

文章来源: Why does Sass change the format of my colors?