有没有办法在CSS中引用值作为"变量"？

Question

我正在尝试正确编写内部Web应用程序的HTML和CSS.尽可能在技术上,我希望HTML标记定义页面的内容,并完全独立于布局需要.

显然,不可能完美地做到这一点.每次我必须添加一个额外的嵌套div时,我会死一点,其唯一目的是使布局工作.

我一直试图解决的最新问题是如何减少.css文件中重复文本的数量.主要是颜色.在我的整个应用程序中,我使用颜色来表示"干净","错误","警告"和"赦免",到目前为止,几乎每个使用颜色的地方都需要明确定义它们.有时它们用于文本颜色,有时用于背景颜色,有时用于边框颜色.

有没有办法为名称赋予颜色等值,然后在CSS属性中引用该名称？

我知道继承如何在CSS中工作,我知道实现这个目标的一种方法是在我的很多元素上使用多个类名,然后我就可以backgroundClean成为各种对象使用的样式.但需要做的HTML意识到,仅仅是页面的风格布局,而不是数据,这正如我所说,我会更多的相关数据,希望避免的.

奖金问题:做这种事情的最佳做法是什么？我是不是很愚蠢,试图让HTML + CSS像MVC一样没有准备好呢？我知道这是CSS一直以来的方向,但也许它还没有.

Answer 1

为什么是,有新引入的css变量来做到这一点!

不幸的是......它还没有进入浏览器,所以你还不能使用它们.

要获得相同的行为,您需要使用某种服务器端语言将颜色动态输出到CSS文件中.(你也可以使用大量的javascript,但这太可怕了)

所以在PHP中你可以这样做:

styles.php---------------------
<?php
$warningColor = "#f00";
?>

.warning {
     color: <?=$warningColor?>;
}
.error {
     color: <?=$warningColor?>;
}

index.html----------------------

<link rel="stylesheet" src="styles.php" />

Answer 2

没有任何当前的浏览器支持没有.虽然如果您使用SASS之类的东西预处理CSS,那么您可以执行此操作以及更多内容.SASS改进CSS几乎是每一种方式.它使编写样式表变得更容易,更有趣.我永远不会回去写香草CSS.