在.CSS文件中创建一个变量，以在该.CSS文件中使用
Possible Duplicate: Avoiding repeated constants in CSS
我们的CSS工作表中有一些"主题颜色"可以重复使用。
有没有设置变量然后再使用的方法？
例如。
.css
OurColor: Blue
H1 {
color:OurColor;
}
解决方案
回答
CSS不提供任何此类功能。唯一的解决方案是编写一个预处理脚本，该脚本可以手动运行以生成基于某些动态伪CSS的静态CSS输出，也可以连接到Web服务器并在将CSS发送到客户端之前对其进行预处理。
回答
由于CSS尚无此功能(但是，我相信下一个版本会提供)，因此请遵循Konrad Rudolphs的建议进行预处理。我们可能想使用已经存在的一种：m4
http://www.gnu.org/software/m4/m4.html
回答
我们不是第一个想知道的人，答案是否定的。艾略特(Elliotte)对它有个好话：http://cafe.elharo.com/web/css-repeats-itself/。我们可以使用JSP或者等效的JSP在运行时生成CSS。
回答
不，但是Sass做到了。它是CSS预处理程序，可让我们使用许多快捷方式来减少需要编写的CSS数量。
例如：
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
除了变量之外，它还提供了嵌套选择器的功能，使逻辑上保持分组：
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
还有更多：mixin的作用类似于函数，并且能够从另一个选择器继承一个选择器。这非常聪明，也非常有用。
如果我们使用Ruby on Rails进行编码，它甚至会自动为我们编译为CSS，但是还有一个通用的编译器可以按需为我们完成此操作。
回答
不需要选择器的所有样式都驻留在一个规则中，并且一个规则可以应用于多个选择器...因此，将其翻转：
/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }
/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }
/* ... */
/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }
/* ... */
/* H1-specific styles */
H1
{
font-size: 2em;
margin-bottom: 1em;
}
这样，我们可以避免重复概念上相同的样式，同时还要清楚说明它们影响文档的哪些部分。
请注意最后一句中对"概念上"的强调...这只是出现在注释中，所以我将对此稍作扩展，因为在此之前的几年中，我已经看到人们一遍又一遍地犯同样的错误甚至CSS的存在：两个属性共享相同的值并不一定意味着它们表示相同的概念。傍晚的天空可能看起来是红色的，西红柿也是如此，但是出于相同的原因，天空和西红柿不是红色的，它们的颜色会随时间而独立变化。同样，只是因为我们在样式表中碰巧有两个元素被赋予了相同的颜色，或者大小或者位置并不意味着它们将始终共享这些值。天真的设计师使用分组(如此处所述)或者诸如SASS或者LESS之类的变量处理器来避免价值重复的风险，这会导致将来对样式的更改非常容易出错。在寻求减少重复而忽略其当前值时，请始终专注于样式的上下文含义。
回答
我们让它变得太复杂了。这就是级联存在的原因。只需提供元素选择器并对颜色进行分类即可：
h1 {
color: #000;
}
.a-theme-color {
color: #333;
}
然后将其应用于HTML中的元素，并在需要使用主题颜色时覆盖。
<h1>This is my heading.</h1> <h1 class="a-theme-color">This is my theme heading.</h1>
回答
目前尚不支持，除非我们使用一些脚本根据我们定义的某些变量生成CSS。
但是，似乎至少有一些来自浏览器领域的人正在研究它。因此，如果将来真的成为标准，那么我们将不得不等到在所有浏览器中实现它(直到那时它才不可用)。
回答
另请参见避免CSS中的重复常量。正如Farinha所说，已经提出了CSS Variables提案，但是暂时要使用预处理器。
回答
我们可以在HTML元素的class属性中使用mutliple类，每个类都提供样式的一部分。因此，我们可以将CSS定义为：
.ourColor { color: blue; }
.ourBorder { border: 1px solid blue; }
.bigText { font-size: 1.5em; }
然后根据需要组合类：
<h1 class="ourColor">Blue Header</h1> <div class="ourColor bigText">Some big blue text.</div> <div class="ourColor ourBorder">Some blue text with blue border.</div>
这样一来，我们就可以重用ourColor类，而不必在CSS中定义多次颜色。如果更改主题，只需更改ourColour的规则。
回答
这听起来像是精神错乱，但是如果我们使用的是NAnt(或者Ant或者某些其他自动构建系统)，则可以通过hacky方式将NAnt属性用作CSS变量。从CSS模板文件(可能是styles.css.template之类)开始，其中包含以下内容：
a {
color: ${colors.blue};
}
a:hover {
color: ${colors.blue.light};
}
p {
padding: ${padding.normal};
}
然后在构建中添加一个分配所有属性值的步骤(我使用外部构建文件并<include>它们)并使用<expandproperties>过滤器生成实际的CSS：
<property name="colors.blue" value="#0066FF" />
<property name="colors.blue.light" value="#0099FF" />
<property name="padding.normal" value="0.5em" />
<copy file="styles.css.template" tofile="styles.css" overwrite="true">
<filterchain>
<expandproperties/>
</filterchain>
</copy>
当然，缺点是必须运行css生成目标，然后才能在浏览器中检查外观。这可能会限制我们手动生成所有CSS。
但是，我们可以编写NAnt函数来完成各种很酷的事情，而不仅仅是属性扩展(例如动态生成梯度图像文件)，所以对我来说，这值得头疼。
回答
CSS尚未使用变量，这对于它的时代是可以理解的，并且是一种声明性语言。
这是实现更多动态样式处理的两种主要方法：
- 内联css示例中的服务器端变量(使用PHP)：
<style> .myclass{color:<?php echo $color; ?>;} </style>
- 使用javascript进行DOM操作以更改CSS客户端示例(使用jQuery库)：
$('.myclass').css('color', 'blue');
OR
//The jsvarColor could be set with the original page response javascript
// in the DOM or retrieved on demand (AJAX) based on user action.
$('.myclass').css('color', jsvarColor);
回答
我已经编写了一个宏(在Visual Studio中)，该宏不仅使我可以为命名颜色编码CSS，还可以轻松计算这些颜色的阴影或者混合色。它还处理字体。它会在保存时触发并输出单独版本的CSS文件。这与Bert Bos的论点是一致的，即CSS中的任何符号处理都在创作时进行，而不是在解释时进行。
完整的设置以及所有代码可能太复杂了，无法在此处发布，但可能适合以后的博客发布。这是宏中的注释部分，应该足以开始使用。
此方法的目标如下：
- 允许在中心位置定义基色，字体等，以便可以轻松调整整个货盘或者印刷处理，而不必使用搜索/替换
- 避免在IIS中映射.CSS扩展名
- 生成可以用于多种样式的花园文本CSS文件，例如，VisualStudio的设计模式可以使用
- 在创作时一次生成这些文件，而不是在每次请求CSS文件时都重新计算它们
- 立即透明地生成这些文件，而无需在调整保存测试工作流程中添加额外的步骤
使用这种方法，颜色，颜色阴影和字体系列都由速记标记表示，这些标记引用XML文件中的值列表。
包含颜色和字体定义的XML文件必须称为Constants.xml，并且必须与CSS文件位于同一文件夹中。
每当VisualStudio保存CSS文件时，EnvironmentEvents都会触发ProcessCSS方法。将扩展CSS文件，并将该文件的扩展的静态版本保存在/ css / static /文件夹中。 (所有HTML页面均应引用CSS文件的/ css / static /版本)。
Constants.xml文件可能如下所示：
<?xml version="1.0" encoding="utf-8" ?>
<cssconstants>
<colors>
<color name="Red" value="BE1E2D" />
<color name="Orange" value="E36F1E" />
...
</colors>
<fonts>
<font name="Text" value="'Segoe UI',Verdana,Arial,Helvetica,Geneva,sans-serif" />
<font name="Serif" value="Georgia,'Times New Roman',Times,serif" />
...
</fonts>
</cssconstants>
在CSS文件中，我们可以定义如下：
font-family:[[f:Text]]; background:[[c:Background]]; border-top:1px solid [[c:Red+.5]]; /* 50% white tint of red */
回答
通过使用Less CSS，我们可以实现更多目标。
