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

Question

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

$color: #000;

.box {
    color: $color;
}

输出到:

.box {
  color: black;
}

不应该输出十六进制值？

Answer 1

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

• 萨斯将始终最大限度的向后兼容性只要有可能.由于keyword,hex和rgba具有最广泛的浏览器支持,因此所有颜色都将转换为这3种格式中的一种,优先考虑关键字或十六进制.仅当颜色具有Alpha透明度时才使用rgba格式(如果指定rgba(0, 0, 0, 100),Sass会将其转换为black或者#000)
• 如果Sass必须在使用关键字或十六进制格式之间进行选择,它将使用的格式取决于输出设置.该紧凑型或压缩模式将始终转换为十六进制,其他的格式都使用关键字.
• Sass会在压缩模式下将十六进制颜色转换为三位数格式(例如,#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;
}

萨斯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().