在.CSS文件中创建变量以在该.CSS文件中使用

css variables

35038 观看

13回复

6282 作者的声誉

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

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

有没有设置变量然后再使用的方法?

例如

.css
OurColor: Blue

H1 { 
 color:OurColor;
}
作者: Clay Nichols 的来源 发布者: 2008 年 9 月 6 日

回应 (13)


3

422784 作者的声誉

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

作者: Konrad Rudolph 发布者: 06.09.2008 02:26

2

45227 作者的声誉

由于CSS尚无此功能(但我相信下一个版本会提供),因此请遵循Konrad Rudolphs的建议进行预处理。您可能想使用已经存在的一种:m4

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

作者: Daren Thomas 发布者: 06.09.2008 02:28

5

50609 作者的声誉

您不是第一个想知道的人,答案是否定的。艾略特(Elliotte)对此有一个很好的抱怨:http : //cafe.elharo.com/web/css-repeats-itself/。您可以使用JSP或等效的JSP在运行时生成CSS。

作者: sblundy 发布者: 06.09.2008 02:31

7

13683 作者的声誉

不,但是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,但是还有一个通用的编译器可以按需为您完成此操作。

作者: Tim Sullivan 发布者: 06.09.2008 02:39

89

134895 作者的声誉

决定

不需要选择器的所有样式都驻留在一个规则中,并且一个规则可以应用于多个选择器...因此,将其翻转

/* 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之类的变量处理器来避免价值重复的风险,这会导致将来对样式的更改非常容易出错。寻求减少重复时,始终将注意力放在样式的上下文意义上,而忽略了样式的当前值

作者: Shog9 发布者: 06.09.2008 02:43

2

0 作者的声誉

您让它变得太复杂了。这就是级联存在的原因。只需提供您的元素选择器并对颜色进行分类即可:

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>
作者: user4903 发布者: 06.09.2008 02:45

3

8338 作者的声誉

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

但是,似乎至少有一些来自浏览器领域的人正在研究它。因此,如果将来真的成为标准,那么我们将不得不等到在所有浏览器中实现它(直到那时它才不可用)。

作者: Farinha 发布者: 06.09.2008 03:01

1

15813 作者的声誉

另请参见避免CSS中的重复常量。正如Farinha所说的,已经提出了CSS变量建议,但是目前您想使用预处理器。

作者: Sören Kuklau 发布者: 06.09.2008 03:30

1

2319 作者的声誉

您可以在HTML元素的class属性中使用mutliple类,每个类都提供样式的一部分。因此,您可以将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的规则。

作者: Simon Forrest 发布者: 06.09.2008 08:05

1

25241 作者的声誉

这听起来像是精神错乱,但是如果您使用的是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函数来完成除属性扩展(例如动态生成梯度图像文件)之外的各种很酷的事情,因此对我而言,值得头痛的是。

作者: Matt 发布者: 06.09.2008 08:35

0

0 作者的声誉

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<br> // in the DOM or retrieved on demand (AJAX) based on user action. $('.myclass').css('color', jsvarColor);

作者: id 发布者: 16.09.2008 05:15

2

24384 作者的声誉

我已经编写了一个宏(在Visual Studio中),它使我不仅可以为命名颜色编码CSS,还可以轻松计算这些颜色的阴影或混合色。它还处理字体。它在保存时触发并输出单独版本的CSS文件。这与Bert Bos的论点是一致的,即CSS中的任何符号处理都在创作时进行,而不是在解释时进行。

完整的设置以及所有代码可能太复杂了,无法在此处发布,但可能适合以后的博客发布。这是宏中的注释部分,应该足以开始使用。


此方法的目标如下:

  1. 允许在中心位置定义基色,字体等,以便可以轻松调整整个货盘或印刷处理,而不必使用搜索/替换

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

  3. 生成各种花园文本CSS文件,例如,VisualStudio的设计模式可以使用

  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 */
作者: Herb Caudill 发布者: 22.09.2008 01:38

15

26634 作者的声誉

使用Less CSS可以实现更多目标。

作者: Giorgi 发布者: 03.04.2010 11:41
32x32