Question

是否可以在CSS文档中使用变量，可能使用Javascript？

例如，如果我有一个整体变量＆＃34; colorOne＆＃34;分配给＆＃34; #fffff＆＃34;。

然后可以调用＆＃34; colorOne＆＃34;后来？例如＆＃34; color：colorOne;＆＃34;？

我可以使用find和replace来替换实例，但这变得非常繁琐，还有其他选择吗？

Answer 1

在纯粹的CSS中 - 不！

但您可以使用许多工具来执行此操作并为您编译css：

少量CSS - http://lesscss.org/
指南针 - http://compass-style.org/（编译SASS / SCSS http://sass-lang.com/）

Answer 2

使用纯CSS无法做到这一点。

但是，您可以使用第三方库（例如LESS）来实现此目的：

@nice-blue: #5B83AD;

#header { color: @nice-blue; }

Answer 3

您可以使用预处理器，例如：http://lesscss.org/

这使你能做的就是写这样的CSS

@colorOne: #FFFFFF;

.main_links {
  color: @colorOne;
}
h2 {
  color: @colorOne;
}

并且编译后的输出将是

.main_links {
  color: #FFFFFF;
}
h2 {
  color: #FFFFFF;
}

使用LESS的理由不仅仅是分配变量，它功能强大，可以让你做更多的事情，比如嵌套样式，看一下文档：http://lesscss.org/#synopsis

Answer 4

也不要忘记SASS。 {{3P>

Syntactically Awesome Stylesheets。

Answer 5

你不能在纯CSS中使用变量，但除了像LESS这样的东西之外，还有另一种方式（不是最干净的，但是它有效......有点）。

设置代表变量的类：

.color-black {
    color: #000000;
}

.color-red {
    color: #FF0000;
}

然后，您可以针对元素指定多个类：

<div class="some-class other-class color-black"></div>
<div class="some-class other-class color-red"></div>

此后，无论何时更改color-black或color-red中的值，都会更改使用该类的所有元素的颜色。

正如我所说，这不是最干净的做事方式，并且可能导致臃肿的html / css，但它可以有它的用途...例如在测试环境中如果你正在测试配色方案/ designs。

注意：另外要提到的是，使用此方法可以让您使用javascript 动态交换类，如您在问题中所提到的那样。

示例（使用jQuery）

$("#MyDiv").mouseenter(function() { $(this).removeClass("color-red").addClass("color-black"); }).mouseleave(function() { $(this).removeClass("color-black").addClass("color-red"); });

Answer 6

您必须使用类似LESS的内容：

这样您就可以使用variables：

@colorOne: #5B83AD;

#header { color: @colorOne; }

CSS变量赋值

6 个答案: