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

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

$color: #000;

.box {
    color: $color;
}

输出至：

.box {
  color: black;
}

---

不应输出十六进制值？

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

• 只要可能，Sass将始终最大化向后兼容性。由于关键字、十六进制和rgba具有最广泛的浏览器支持，因此所有颜色都将转换为这三种格式之一，并按关键字或十六进制排列优先级。rgba格式仅在颜色具有alpha透明度时使用（如果指定

  rgba（0,0,0,100）

  ，Sass将其转换为

  黑色

  或

  #000

  ）
• 如果Sass必须在使用关键字或十六进制格式之间进行选择，它将使用的格式将取决于输出设置。压缩或压缩模式将始终转换为十六进制，其他格式将使用关键字
• 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;
}

.foo {
  color: #F00;
}

Sass 3.4及更高版本 从3.3到3.4的唯一变化是，在使用变量时，Sass将保留颜色的格式。。。除非它不是关键字、十六进制或rgba格式

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

但是如果我真的需要一个特定的格式呢？ 如果必须使用特定格式，可以将其转换为字符串：

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

输出：

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

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

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

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

.foo {
  color: #F00;
}

请记住，在执行此操作时，您的“颜色”将无法与诸如

lighting（）

或

darken（）

之类的颜色操纵功能一起工作