在 .CSS 文件中创建一个变量以在该 .CSS 文件中使用 [重复]

Posted 2023-03-05

【中文标题】在 .CSS 文件中创建一个变量以在该 .CSS 文件中使用 [重复]

【英文标题】：Create a variable in .CSS file for use within that .CSS file [duplicate]

【发布时间】：2010-09-08 00:43:12

【问题描述】：

可能重复：Avoiding repeated constants in CSS

我们有一些“主题颜色”可以在我们的 CSS 表中重复使用。

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

例如

.css
OurColor: Blue

H1  
 color:OurColor;

【问题讨论】：

见：Why “variables” in CSS are harmful。

看到这个问题：http://***.com/questions/30170/avoiding-repeated-constants-in-css#30189

这可以通过 css 变量实现，现在大多数现代浏览器都支持，css 看起来像：:root--main-color: blue H1color:var(--main-color) 作为评论发布，因为 css 变量未在下面列出，并且问题被标记为重复（所以我无法回答），但这是特定于标记的重复未明确与变量有关的变量。

【参考方案1】：

不要求选择器的所有样式都位于单个规则中，单个规则可以应用于多个选择器...所以翻转它：

/* 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 重复的天真设计师可能会在未来对样式进行更改，从而极易出错；在寻求减少重复时，始终关注样式的上下文含义，而忽略它们的当前值。

【讨论】：

+1 不幸的是，在复杂的情况下，（对我来说）使用 CSS 优先级来拍摄（我的）脚仍然很容易——在这种情况下，只需在选择器中再添加一个元素可能会导致规模！ （因此保持 CSS 的整洁和组织良好并尽量避免 [过度] 覆盖非常重要。）

在软件开发中，重用代码总是有用的，因此避免变量意味着一次又一次地复制粘贴相同的值：该元素颜色的蓝色值，相同的蓝色对于这个其他元素的背景颜色，依此类推。这是错误的！

避免混淆事物的价值和事物的目的是很重要的，@Adrian。如果第一个元素的颜色和第二个元素的背景不相关，那么对两者使用相同的变量 - 即使最初它们会具有相同的值 - 设置你为将来的维护噩梦做准备，“为什么更改主页横幅的文本颜色会使配置文件上所需的输入字段变黑？”种类。无论您使用变量还是选择器分组来避免重复，您都应该始终确保关注语义，而不是值。

@Shog9 当然，你是对的。通常一些参数，特别是颜色是皮肤中几个参数的旋转：清晰背景上的深色，而对于按钮，我们使用相反的颜色：深色上的清晰。因此，更改它们适用于所有实例。

【参考方案2】：

您可以使用Less CSS 来实现它以及更多功能。

【讨论】：

还有更多 Sass =) sass-lang.com

【参考方案3】：

不，但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，但也有一个通用编译器可以按需为您完成。

【讨论】：

Sass 不依赖于 Rails。您只需要 ruby​​ 即可运行将 sass 源代码转换为 css 的脚本。否则，您的网站可以建立在您选择的任何语言上。

专用的 Sass/SCSS URL 是 sass-lang.com

【参考方案4】：

您不是第一个想知道的人，答案是否定的。 Elliotte 有一个很好的咆哮：http://cafe.elharo.com/web/css-repeats-itself/。您可以使用 JSP 或其等效物在运行时生成 CSS。

【讨论】：

确实，这样做的唯一方法是让服务器生成您的 CSS 文件，这可以通过多种方式完成，具体取决于您使用的语言。 HttpHandlers 在 C# 中很常见。您可以使用 jQuery 或类似的方法为每个元素添加样式，使用类 'ourColur' 并参数化您的 JS

【参考方案5】：

CSS 不提供任何此类功能。唯一的解决方案是编写一个预处理脚本，该脚本要么手动运行以基于一些动态伪 CSS 生成静态 CSS 输出，要么连接到 Web 服务器并在将 CSS 发送到客户端之前对其进行预处理。

【参考方案6】：

目前不支持，除非您使用某些脚本根据您定义的某些变量生成 CSS。

不过，似乎至少有一些来自浏览器世界的人是working on it。所以，如果它真的在未来的某个时候成为标准，那么我们将不得不等到它在所有浏览器中实现（到那时它才会无法使用）。

【讨论】：

jsfiddle.net/TfGgJ/1 不在这里工作，FF 16 在 Linux Mint 13 下。

【参考方案7】：

由于 CSS 没有（但我相信下一个版本会），因此请遵循 Konrad Rudolphs 的建议进行预处理。你可能想使用一个已经存在的：m4

http://www.gnu.org/software/m4/m4.html

【参考方案8】：

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

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 的精神，即内容和表示的分离。您的方式需要更改 HTML 以进行演示，并在内容中说明哪些元素具有相同的颜色。

使 HTML 膨胀并使样式应用复杂化。例如， 这是页面的标题 我想在 CSS 中拥有 PageTitle 的所有样式。使用提出的方法，我需要将上面的 html 包装在 中，这会使 CSS 代码 a

加倍

【参考方案9】：

我已经编写了一个宏（在 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 */

【参考方案10】：

另见Avoiding repeated constants in CSS。正如 Farinha 所说，已经提出了 CSS 变量提案，但目前，您希望使用预处理器。

【参考方案11】：

您可以在 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 的规则即可。

【参考方案12】：

这听起来很疯狂，但如果您使用的是 NAnt（或 Ant 或其他一些自动构建系统），您可以以一种 hacky 的方式将 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 函数来做各种很酷的事情，而不仅仅是属性扩展（例如动态生成渐变图像文件），所以对我来说这值得头疼。

【讨论】：

那个不错的解决方案。但是，您需要推荐真正的宏处理器，例如M4 或其他模板引擎，而不是依赖构建工具。

【参考方案13】：

CSS （还）没有使用变量，这是可以理解的，因为它的年龄和它是一种声明性语言。

以下是实现更动态样式处理的两种主要方法：

内联 CSS 中的服务器端变量 示例（使用 php）：

<style> .myclasscolor:<?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);