Question

我们知道HTML标准定义了一堆颜色，但是我可以在较少的CSS中定义和使用新颜色吗？

说我想要一个颜色DoctorWhite，我想像

一样使用它

background-color:DoctorWhite;

我知道较少的CSS可以定义变量并使用at（@）表示法。但它看起来不像原生颜色。

是否可以减少css？或者其他任何CSS预处理器都支持这个吗？

Answer 1

您是否考虑过使用CSS custom properties？

＆＃13;

:root {
  --stackoverflow: #f69c55;
}
.rectangle {
  width: 100px;
  height: 100px;
  margin: 10px auto;
}
.rectangle.default-color {
  background-color: black;
}
.rectangle.custom-color {
  background-color: var(--stackoverflow);
}

＆＃13;

<div class="rectangle default-color">
  <!-- will become black -->
</div>
<div class="rectangle custom-color">
  <!-- will become orange -->
</div>

＆＃13;

此处，var()函数用于将background-color .rectangle.custom-color属性的值设置为--stackoverflow变量的值（即#f69c55 ）。

请记住，这是W3C候选推荐标准（旨在成为W3C规范），正如@Ricky_Ruiz建议的那样，请确保您使用CanIUse等服务定位的浏览器支持它。< / p>

旁注：自定义变量名称开头的两个破折号（--）不是任意的：

自定义属性是名称以两个破折号（U + 002D HYPHEN-MINUS）开头的任何属性，如--foo。生产对应于此：它被定义为以两个破折号开头的任何有效标识符。

请查看section 2 of the Candidate Recommendation document了解更多信息。

Answer 2

没有

在LESS中，如您所说，变量标有@。在Sass中，它们标有$。例如，您的DoctorWhite是#fffffe：

LESS： @DoctorWhite: #fffffe; div {background-color: @DoctorWhite}
Sass： $DoctorWhite: #fffffe; div {background-color: $DoctorWhite}

正如 @blonfu 所说，在Stylus中它们没有任何标记 - 所以如果您的目标是让任何看到您的预处理样式表的人认为您的自定义颜色名称是标准化的颜色名称，可能有用。（但很难想象用例......）

<强>书写笔：

DoctorWhite = #fffffe

put a bunch of other styles here so the viewer doesn't notice you defined DoctorWhite

div
  background-color DoctorWhite

但是在所有情况下，在HTML具有颜色WhiteSmoke的意义上，您实际上并未定义新的颜色名称。编译后的CSS（因为它出现在加载的样式表中，因为它将出现在浏览器的检查器中）仍将使用您给出的十六进制值DoctorWhite - 在上述所有示例中，或者如果您做一个自定义CSS属性解决方案，CSS将是
div {background-color: #fffffe}。

定义新的CSS颜色名称

2 个答案: