我们有一些“主题颜色”可以在我们的 CSS 表中重复使用。
有没有办法设置一个变量然后重用它？
例如
.css
OurColor: Blue
H1 {
color:OurColor;
}
【问题讨论】：
:root{--main-color: blue} H1{color:var(--main-color)} 作为评论发布，因为 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;
}
这样，您可以避免重复在概念上相同的样式，同时还可以明确它们影响文档的哪些部分。
请注意最后一句中对“概念上”的强调...这只是在 cmets 中出现的，所以我将对其进行一些扩展，因为我看到人们一遍又一遍地犯同样的错误多年来 - 甚至早于 CSS 的存在：共享相同值的两个属性并不一定意味着它们代表相同的概念。天空在晚上可能会呈现红色，西红柿也是如此 - 但天空和西红柿不是红色的原因相同，它们的颜色会随着时间而独立变化。出于同样的原因，仅仅因为您的样式表中有两个元素具有相同的颜色、大小或位置，并不意味着它们将总是共享这些值。使用分组（如此处所述）或变量处理器（如 SASS 或 LESS）来避免 value 重复的天真设计师可能会在未来对样式进行更改，从而极易出错；在寻求减少重复时，始终关注样式的上下文含义，而忽略它们的当前值。
【讨论】：
您可以使用Less 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，但也有一个通用编译器可以按需为您完成。
【讨论】：
您不是第一个想知道的人，答案是否定的。 Elliotte 有一个很好的咆哮：http://cafe.elharo.com/web/css-repeats-itself/。您可以使用 JSP 或其等效物在运行时生成 CSS。
【讨论】：
CSS 不提供任何此类功能。唯一的解决方案是编写一个预处理脚本，该脚本要么手动运行以基于一些动态伪 CSS 生成静态 CSS 输出，要么连接到 Web 服务器并在将 CSS 发送到客户端之前对其进行预处理。
【讨论】：
目前不支持，除非您使用某些脚本根据您定义的某些变量生成 CSS。
不过，似乎至少有一些来自浏览器世界的人是working on it。所以，如果它真的在未来的某个时候成为标准，那么我们将不得不等到它在所有浏览器中实现（到那时它才会无法使用）。
【讨论】：
由于 CSS 没有（但我相信下一个版本会），因此请遵循 Konrad Rudolphs 的建议进行预处理。你可能想使用一个已经存在的：m4
【讨论】：
你把它弄得太复杂了。这就是级联存在的原因。只需提供您的元素选择器并为您的颜色分类：
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>
【讨论】：
我已经编写了一个宏（在 Visual Studio 中），它不仅允许我为命名颜色编写 CSS 代码，还可以轻松计算这些颜色的阴影或混合。它还处理字体。它在保存时触发并输出 CSS 文件的单独版本。这与Bert Bos's argument 一致，即 CSS 中的任何符号处理都发生在创作时，而不是在解释时。
完整的设置以及所有代码可能有点过于复杂，无法在此处发布，但可能适合以后的博客文章。这是宏的注释部分，应该足以开始。
这种方法的目标如下：
允许在中心位置定义基色、字体等，以便无需使用搜索/替换即可轻松调整整个调色板或印刷处理
避免在 IIS 中映射 .CSS 扩展名
生成可供 VisualStudio 的设计模式等使用的各种文本 CSS 文件
在创作时生成这些文件一次，而不是在每次请求 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 */
【讨论】：
另见Avoiding repeated constants in CSS。正如 Farinha 所说，已经提出了 CSS 变量提案，但目前，您希望使用预处理器。
【讨论】：
您可以在 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 中定义颜色多次。如果您更改主题，只需更改 ourColour 的规则即可。
【讨论】：
这听起来很疯狂，但如果您使用的是 NAnt（或 Ant 或其他一些自动构建系统），您可以以一种 hacky 的方式将 NAnt 属性用作 CSS 变量。从包含以下内容的 CSS 模板文件（可能是 styles.css.template 或其他内容）开始：
a {
color: ${colors.blue};
}
a:hover {
color: ${colors.blue.light};
}
p {
padding: ${padding.normal};
}
然后在您的构建中添加一个分配所有属性值的步骤（我使用外部构建文件并
<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 （还）没有使用变量，这是可以理解的，因为它的年龄和它是一种声明性语言。
以下是实现更动态样式处理的两种主要方法：
<style> .myclass{color:<?php echo $color; ?>;} </style>
使用 javascript 进行 DOM 操作以更改 css 客户端
示例（使用 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);
【讨论】：