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

【问题标题】：Variables in CSS - why can't they be used?CSS 中的变量 - 为什么不能使用它们？
【发布时间】：2023-04-06 02:38:02
【问题描述】：

这让我很困扰，我在任何地方都找不到答案：为什么纯 CSS 不允许我们使用变量？

我们都知道 SASS 和 LESS 预处理器可以让我们的生活变得如此轻松——例如让我们使用变量。 W3C 还没有在 CSS 本身中实现这样的功能有什么特别的原因吗？

我想所有开发人员（包括 W3C 的开发人员）都会同意这将是向前迈出的一大步。有没有什么特别的原因导致它（还没有）？

【问题讨论】：

现在，CSS 中有变量
可能是因为传统变量（正如您可能理解的那样）不适合 CSS 的工作方式？即使是自定义属性（即级联变量），尽管有名称，也不是同一个东西。

标签： css sass less w3c

【解决方案1】：

有一个规范叫做自定义属性 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

【讨论】：

【解决方案2】：

结束我的研究：

您不必使用 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>

【讨论】：