定义新的 CSS 颜色名称

Question

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

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

background-color:DoctorWhite;

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

可以用 less css 实现吗？或者有其他 CSS 预处理器支持这个吗？

Answer 1

您是否考虑过使用CSS 自定义属性？

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n\n

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

\n\n

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

\n\n

\n

自定义属性是名称以两个破折号 (U+002D HYPHEN-MINUS) 开头的任何属性，例如--foo. 产生式与此相对应：it\xe2\x80\x99s 定义为以两个破折号开头的任何有效标识符。

\n

\n\n

请参阅候选人推荐文档的第 2 部分了解更多信息。

\n