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

StackOverflow https://stackoverflow.com/questions/47487

  •  09-06-2019
  •  | 
  •  

题

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

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

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

例如。

.css
OurColor: Blue

H1 { 
 color:OurColor;
}
有帮助吗？

解决方案

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

/* 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）来避免 价值 重复的风险使得未来样式的改变非常容易出错；始终专注于 语境意义 当寻求减少重复时，忽略了它们的风格 当前值.

其他提示

您可以通过使用来实现它以及更多 更少的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;
  }
}

还有更多：mixin 的作用有点像函数，并且能够从一个选择器继承另一个选择器。它非常聪明而且非常有用。

如果您使用 Ruby on Rails 进行编码，它甚至会自动为您编译为 CSS，但还有一个通用编译器可以按需为您完成此操作。

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

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

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

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

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

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

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

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 文件的单独版本。这符合 伯特·博斯​​的论点 CSS 中的任何符号处理都是在创作时发生的，而不是在解释时发生的。

完整的设置以及所有代码有点太复杂，无法在这里发布，但可能适合以后的博客文章。这是宏的注释部分，应该足以开始。

这种方法的目标如下：

  1. 允许基色、字体等。在中心位置定义，以便可以轻松调整整个调色板或印刷处理，而无需使用搜索/替换

  2. 避免在 IIS 中映射 .CSS 扩展名

  3. 生成可供 VisualStudio 设计模式等使用的普通文本 CSS 文件

  4. 在创作时生成这些文件一次，而不是每次请求 CSS 文件时重新计算它们

  5. 立即、透明地生成这些文件，无需在调整-保存-测试工作流程中添加额外的步骤

通过这种方法，颜色、颜色深浅和字体系列都用引用 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 所说，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};
}

然后向您的构建添加一个步骤，分配所有属性值（我使用外部构建文件和 <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 函数来完成各种很酷的事情，而不仅仅是属性扩展（例如动态生成渐变图像文件），所以对我来说，这是值得头痛的。

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top