我们知道 HTML 标准定义了一堆颜色,但我可以在 less css 中定义和使用新颜色吗?
假设我想要一种颜色 DoctorWhite,我想像这样使用它
background-color:DoctorWhite;
我知道 less css 可以定义变量并将其与 at(@) 符号一起使用。但它看起来不像原生颜色。
它可以用更少的 css 实现吗?或者是否有任何其他 CSS 预处理器支持此功能?
最佳答案
您是否考虑过使用 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.
关于css - 定义新的 CSS 颜色名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40370762/