Question

这让我困扰了一段时间，我无法在任何地方找到答案：为什么纯CSS不允许我们使用变量？

我们都知道SASS和LESS预处理器让我们的生活变得如此简单 - 例如让我们使用变量。有没有什么特别的原因可以解释为什么W3C还没有在CSS中实现这样的功能呢？

我认为所有开发人员（也是来自W3C的开发人员）都会同意这将是向前迈出的一大步。是否有任何特殊原因（尚未）？

Answer 1

结束我的研究：

您不必使用SASS或LESS来利用CSS中的变量。

要在CSS中设置一些可重用的值，您必须使用自定义属性表示法声明它们，例如--main-color: black;

然后，您可以使用var（）函数在样式文件中的任何位置访问它们，例如color: var(--main-color);

下面的工作示例：

:root {
  --main-theme-color: red;
}

.one {
  background-color: var(--main-theme-color);
  margin: 10px;
  width: 50px;
  height: 50px;
}

.two {
  background-color: var(--main-theme-color);
  margin: 10px;
  width: 50px;
  height: 50px;
}
.three {
  background-color: var(--main-theme-color);
  margin: 10px;
  width: 50px;
  height: 50px;
}
.four {
  background-color: black;
  color: var(--main-theme-color);
  margin: 10px;
  width: 50px;
  height: 50px;
}

<div class="one"> </div>
<div class="two"> </div>
<div class="three"> </div>
<div class="four"> RED </div>

Answer 2

有一个名为自定义属性的规范 https://www.w3.org/TR/css-variables-1/

但支持现在是一个问题..但它在那里.. http://caniuse.com/css-variables/embed

你可以/应该从css变量开始 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

CSS中的变量 - 为什么不能使用它们？

2 个答案: