css - 定义新的 CSS 颜色名称

Question

我们知道 HTML 标准定义了一堆颜色，但我可以在 less css 中定义和使用新颜色吗？

假设我想要一种颜色 DoctorWhite，我想像这样使用它

background-color:DoctorWhite;

我知道 less css 可以定义变量并将其与 at(@) 符号一起使用。但它看起来不像原生颜色。

它可以用更少的 css 实现吗？或者是否有任何其他 CSS 预处理器支持此功能？

Answer 1

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

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

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

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

请记住，这是一个 W3C 候选推荐标准(旨在成为一个 W3C 规范)，因此正如@Ricky_Ruiz 所建议的那样，使用类似 CanIUse 的服务确保它被您所针对的浏览器所支持。 .

旁注:自定义变量名称开头的两个破折号 (--) 不是任意的:

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. The production corresponds to this: it’s defined as any valid identifier that starts with two dashes.

看看section 2 of the Candidate Recommendation document了解更多。