在.CSS文件中创建一个变量，以便在该.CSS文件中使用

可能重复：

我们有一些“主题颜色”可以在CSS表单中重用

有没有办法设置一个变量然后重用它

例如

---

CSS没有提供任何这样的东西。唯一的解决方案是编写一个预处理脚本，该脚本可以手动运行以基于某些动态伪CSS生成静态CSS输出，也可以连接到web服务器并在将CSS发送到客户端之前对其进行预处理。

因为CSS没有这样的功能（但我相信下一个版本会），按照康拉德·鲁道夫的建议进行预处理。您可能想要使用allready存在的一个：m4

---

你不是第一个想知道的人，答案是否定的。埃利奥特对此有一句好听的话：。您可以使用JSP或其等效工具在运行时生成CSS。

否，但可以这样做。它是一个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;
  }
}

还有更多：行为类似于函数的混合，以及从一个选择器继承另一个选择器的能力。它非常聪明，非常有用

---

如果您使用Ruby on Rails进行编码，它甚至会自动为您将其编译为CSS，但也有一个通用编译器可以根据需要为您执行此操作。

不要求选择器的所有样式都位于一个规则中，并且一个规则可以应用于多个选择器。。。把它翻过来：

通过这种方式，您可以避免重复概念上相同的样式，同时还可以明确它们影响文档的哪些部分

---

注意最后一句中强调的“概念性”。。。这只是在评论中提到的，所以我将对此进行一点扩展，因为我看到人们多年来反复犯同样的错误——甚至早于CSS的存在：两个属性共享相同的值并不一定意味着它们代表相同的概念。晚上天空可能是红色的，西红柿也是如此——但是天空和西红柿不是红色的原因是相同的，它们的颜色会随着时间的推移而独立变化。同样，仅仅因为样式表中有两个元素具有相同的颜色、大小或位置，并不意味着它们总是共享这些值。一个天真的设计师使用分组（如本文所述）或变量处理器（如SASS或更少）来避免值重复的风险使得未来对样式的更改极易出错；在寻求减少重复时，始终关注样式的上下文含义，忽略其当前值

你把事情弄得太复杂了。这就是级联存在的原因。只需提供元素选择器并对颜色进行分类：

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

---

不过，看起来至少有一些来自浏览器世界的人是这样的。因此，如果在将来某个时候它真的成为标准，那么我们将不得不等到它在所有浏览器中实现（到那时它将无法使用）。

另请参见。正如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中多次定义颜色。如果您更改主题，只需更改我们颜色的规则。

这听起来可能有点疯狂，但如果您使用NAnt（或Ant或其他自动生成系统），您可以使用NAnt属性作为CSS变量。从包含如下内容的CSS模板文件（可能是styles.CSS.template或其他文件）开始：

a {
    color: ${colors.blue};
}

    a:hover {
        color: ${colors.blue.light};
    }

p {
    padding: ${padding.normal};
}

然后在构建中添加一个步骤，指定所有属性值（我使用外部构建文件和它们），并使用过滤器生成实际的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）：

  .myclass{color:；}

• 使用javascript进行DOM操作以更改css客户端
  示例（使用jQuery库）：

  $（'.myclass'）.css（'color'，'blue'）
  
  或
  
  //可以使用原始页面响应javascript设置jsvarColor
  
  //在DOM中或根据用户操作按需检索（AJAX）。
  $（'.myclass'）.css（'color'，jsvarColor）
  
  

我（在Visual Studio中）编写了一个宏，它不仅允许我为命名颜色编写CSS代码，还允许我轻松计算这些颜色的色调或混合。它还处理字体。它在保存时触发并输出CSS文件的单独版本。这与CSS中的任何符号处理都发生在au点是一致的

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>

<?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>

   font-family:[[f:Text]];
   background:[[c:Background]]; 
   border-top:1px solid [[c:Red+.5]]; /* 50% white tint of red */