在.CSS文件中创build一个用于该.CSS文件的variables
可能重复：
在CSS中避免重复的常量
我们有一些“主题颜色”可以在我们的CSS表格中重复使用。
有没有办法设置一个variables，然后重新使用它？
例如
.css OurColor: Blue H1 { color:OurColor; } 没有要求select器的所有样式都驻留在单个规则中，并且单个规则可以应用于多个select器…所以将其翻转 ：
/* 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的存在也要早于： 共享同一个值的两个属性并不一定意味着它们表示相同的概念 。 天空在晚上可能会呈现红色，西红柿也是如此 – 但天空和番茄也不会因为同样的原因而变红，而且它们的颜色会随着时间的推移而独立变化。 同样的道理，仅仅因为在样式表中有两个元素被赋予了相同的颜色，或者大小或者位置并不意味着他们总是会共享这些值。 一个天真的devise师使用分组（如此处所述）或可变处理器（如SASS或LESS）来避免重复值风险，将来对样式的更改会导致令人难以置信的错误; 总是注重风格的上下文意义 ，以减less重复，忽略当前的价值 。
您可以通过使用较less的CSS来实现它。
你不是第一个想知道答案是否定的。 Elliotte有一个很好的咆哮： http : //cafe.elharo.com/web/css-repeats-itself/ 。 您可以使用JSP或其等价物在运行时生成CSS。
不，但萨斯是这样做的。 这是一个CSS预处理器，允许您使用很多快捷方式来减less需要编写的CSS数量。
例如：
$blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }
除了variables之外，它还提供了嵌套select器的function，从逻辑上对事物进行分组：
table.hl { margin: 2em 0; td.ln { text-align: right; } } li { font: { family: serif; weight: bold; size: 1.2em; } }
还有更多的事情：mixin的行为类似于函数，以及从另一个inheritance一个select器的能力。 这非常聪明，非常有用。
如果你使用Ruby on Rails进行编码，它甚至会自动将它编译成CSS，但也有一个通用的编译器可以为你做点播。
CSS不提供任何这样的事情。 唯一的解决方法是编写一个预处理脚本，手动运行该脚本以基于某些dynamic伪CSS生成静态CSS输出，或者将其连接到Web服务器，并在将CSS发送到客户端之前对其进行预处理。
目前还不支持，除非你使用一些脚本来生成基于你定义的一些variables的CSS。
但似乎至less有一些来自浏览器世界的人正在研究它 。 所以，如果在将来某个时候真正成为标准，那么我们必须等到它在所有的浏览器中实现（到那时它将不可用）。
由于CSS没有（但是，我相信下一个版本会），请按照Konrad Rudolphs的build议进行预处理。 你可能想要使用一个已经存在的：m4
你让它太复杂了。 这是级联存在的原因。 简单地提供你的元素select器，并为你的颜色分类：
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>
我写了一个macros（在Visual Studio中），它使我不仅可以为CSS命名的颜色进行编码，而且可以轻松计算阴影或这些颜色的混合。 它也处理字体。 它在保存时触发，并输出一个独立版本的CSS文件。 这与伯特·博斯斯（Bert Bos）的论点是一致的，即CSS中的任何符号处理都是在创作点上进行的，而不是在解释的angular度。
完整的设置和所有的代码将会有些复杂，不适合在这里发布，但可能适用于博客文章。 这里是从macros应该足以开始的评论部分。
这种方法的目标如下：
-
允许在中心位置定义基本的颜色，字体等，这样整个调色板或印刷处理可以轻松调整，而无需使用search/replace
-
避免在IIS中映射.CSS扩展名
-
生成可以使用的花园风格的文本CSS文件，例如VisualStudio的devise模式
-
在创作时一次生成这些文件，而不是在每次请求CSS文件时重新计算它们
-
生成这些文件即时和透明，而无需额外的步骤，调整保存testing工作stream程
通过这种方法，颜色，颜色阴影和字体系列都用简写标记来表示，这些简写标记引用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 */
另请参阅避免在CSS中重复常量 。 正如Farinha所说，已经提出了一个CSSvariables提案，但暂时你想要使用一个预处理器。
您可以在HTML元素的class属性中使用多个类，每个类都提供样式的一部分。 所以你可以定义你的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中定义颜色多less次。 如果您更改主题，只需更改ourColour的规则。
这可能听起来像疯了一样，但是如果你正在使用NAnt（或者Ant或者其他一些自动化的编译系统），你可以用hanty的方式使用NAnt属性作为CSSvariables。 从一个CSS模板文件（也许styles.css.template或者其他东西）开始，包含这样的内容：
a { color: ${colors.blue}; } a:hover { color: ${colors.blue.light}; } p { padding: ${padding.normal}; }
然后向您的构build添加一个步骤，以指定所有属性值（我使用外部构build文件和<include>它们），并使用<expandproperties>filter来生成实际的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函数来完成除了属性扩展（如dynamic生成渐变图像文件）之外的各种各样的超酷事物，所以对我来说这是值得头痛的。
CSS（还没有）使用variables，这是可以理解的，因为它的年龄，它是一个声明性的语言。
以下是实现更多dynamic样式处理的两种主要方法：
- 内联css中的服务器端variables
示例（使用PHP）：
<style> .myclass{color:<?php echo $color; ?>;} </style>
-
用javascript来改变CSS客户端的DOM操作
示例（使用jQuery库）：$('.myclass').css('color', 'blue');要么
//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);
