0

是否可以通过使用 Javascript 在 CSS 文档中使用变量？

例如，如果我有一个整体变量“colorOne”分配给“#ffffff”。

那么以后可以调用“colorOne”吗？例如“颜色：colorOne；”？

我可以使用查找和替换来替换实例，但这变得非常乏味，是否有替代方案？

4

6 回答 6

4

在纯 CSS 中 - 不！

但是您可以使用许多允许这样做并为您编译 css 的工具：

  1. 更少的 CSS - http://lesscss.org/
  2. Compass - http://compass-style.org/（编译 SASS/SCSS http://sass-lang.com/）
于 2013-08-28T13:26:12.530 回答
2

您可以使用预处理器，例如： 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

于 2013-08-28T13:26:36.267 回答
2

也不要忘记 SASS。 http://sass-lang.com

语法上很棒的样式表。

于 2013-08-28T13:27:18.243 回答
2

这对于纯 CSS 是不可能的。

但是，您可以使用第三方库，例如LESS来实现：

@nice-blue: #5B83AD;

#header { color: @nice-blue; }
于 2013-08-28T13:25:28.047 回答
2

您不能在纯 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 臃肿，但它可以有它的用途......例如，如果您正在测试配色方案/设计，则可以在测试环境中使用。

注意：要提到的另一件事是，使用此方法允许您使用 javascript动态交换类，正如您在问题中提到的那样。

示例（使用 jQuery）

$("#MyDiv").mouseenter(function() {
    $(this).removeClass("color-red").addClass("color-black");
}).mouseleave(function() {
    $(this).removeClass("color-black").addClass("color-red");
});
于 2013-08-28T13:46:20.850 回答
1

您将不得不使用类似的东西LESS：

这将允许您使用变量：

@colorOne: #5B83AD;

#header { color: @colorOne; }
于 2013-08-28T13:25:40.920 回答