CSS中是否可以定义变量？

Question

我是学习CSS和HTML的，现在正在做一个简单的代码示例。在我的CSS中，我使用许多样式的颜色，来设置边框颜色或文本颜色！

我可以将这个颜色定义为通用名称吗？我问这个问题是因为我认为如果以后想要更改它，只需要更改1行就可以了！

例如：

DEFINE MYCOLOR #000000

h1{text-color:MYCOLOR;}
#mydiv{background-color:MYCOLOR;}

我找到了这篇文章(Is it possible to define constants in css?), 但它对我没用 (所以不会重复), 因为其中一个回答说要使用类(class), 但我使用了不同属性的MYCOLOR, 所以它并没有起作用，而其他的答案则建议使用 CSS 扩展(extension)。

通过纯 CSS 和 HTML 实现这个目标是可能的吗？

(这是我的第一篇帖子，如果有些混乱请见谅...)

- thur

---

“只用纯CSS和HTML就能做到吗？” 不行。 - j08691

你是C语言开发者，对吧？ ;) - MMM

Answer 1

为了在编写样式表时使用变量（或者宽泛地说，常量），你需要一个 SCSS 预处理器。

预处理器领域的两个主要玩家是：

• SASS（我个人最喜欢的，特别是与 compass 一起使用）

• Less

一些示例：

SASS（使用 scss 语法）：

$mycolor: #000000;

h1 { color: $mycolor; }

LESS

@mycolor: #0000000;

h1 { color: @mycolor; }

首先，我的建议是在Codepen或CSSDeck中尝试使用两者（它们都提供SASS / LESS实时编译），以便更好地了解语法。

预处理器还为您提供更多的编程功能，如混合和控制结构。警告：一旦开始预处理，就很难回去：）

- Nick Tomlin

Answer 2

不，纯CSS不能提供此功能。

如果需要该功能，您需要使用Less等工具。

- John Fisher

Answer 3

简短的答案是可以，但现在不行（可能还需要一段时间）。

http://css3.bradshawenterprises.com/blog/css-variables/ 解释了如何使用最新版本的 Chrome 进行测试的方法。

这个想法是使用以下代码：

:root {
    var-color: rgba(255,0,0);
}

h1 {
    color: var(color);
}

实际上，这个代码已经从Webkit中删除了，许多人评论说他们并不喜欢它。因此，人们经常使用SASS或LESS。我也写过关于这个的文章：http://css3.bradshawenterprises.com/blog/why-sass/。SASS使它变得很容易：

$brand-color: rgb(255,0,0);

h1 {
    color: $brand-color;
}

- Rich Bradshaw

Answer 4

你可以这样做：

.mycolorText{
    color: #000000;
}
.mycolorBg{
    background-color: #000000;
}

然后在你的HTML中这样做：

<h1 class="mycolorText">
<div class="mycolorBg">

使用CSS定义样式的技巧在于你可以在元素上组合类。这意味着你可以这样做：

<div class="mycolorBg mycolorText">

虽然这样做不能让你在一个地方完成，但是它可以让你在只有两个地方完成，这仍然很容易更新。

否则，你将不得不按照其他人的建议使用CSS预处理器。

- Ryan

Answer 5

你可以使用预处理器来完成你的问题，而且你有不止一种选择。正如其他回答中提到的，你可以使用 LESS 或 SASS。

如果你需要帮助确定哪一个适合你，考虑阅读 Chris Coyier 的这篇 文章。

- brightintro