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

Question

可能的重复：
避免 CSS 中的重复常量

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

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

例如

.css
OurColor: Blue

H1 { 
 color:OurColor;
}

score 90 · Accepted Answer

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

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

score 16 · Accepted Answer

16

您可以通过使用Less CSS来实现它以及更多。

于 2010-04-03T11:41:02.287 回答

score 7 · Accepted Answer

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

score 5 · Accepted Answer

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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>

score 2 · Accepted Answer

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

score 1 · Accepted Answer

另请参阅避免 CSS 中的重复常量。正如 Farinha 所说，已经提出了 CSS 变量提案，但目前，您希望使用预处理器。

score 1 · Accepted Answer

您可以在 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 中定义颜色多次。如果您更改主题，只需更改 ourColor 的规则。

score 1 · Accepted Answer

这听起来很疯狂，但如果您使用的是 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 函数来做各种很酷的事情，而不仅仅是属性扩展（比如动态生成渐变图像文件），所以对我来说，这值得头疼。

score 0 · Accepted Answer

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

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

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

<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);

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

13 回答 13

Related

Reference