sass - 为什么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必须在使用关键字格式还是十六进制格式之间进行选择，则它将使用的格式取决于输出设置。压缩或压缩模式将始终转换为十六进制，其他格式将使用关键字。

Sass将在压缩模式下将十六进制颜色转换为3位数格式(例如#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;
}

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()之类的颜色处理功能一起使用。