SCSS 变量和 CSS 变量之间的区别？

Question

我不明白CSS 自定义属性（变量）和SCSS 变量之间的区别（顺便说一下，我是 Sass 新手）。

如果这个 CSS 代码：

:root {
    --someColor: coral;
}
  
body {
    background: var(--someColor);
}

获得与以下 SCSS 代码相同的结果：

$someColor: coral;
    
body {
    background: $someColor;
}

为什么引入 SCSS 变量？它们真的和 CSS 变量一样吗，还是我遗漏了什么？

Answer 1

SCSS 是一个预处理器。这意味着它不是 CSS，而是在“编译时”转换为 CSS。生成的 CSS 代码与原始 SCSS 代码没有相似之处。因此，您无法在 CSS“运行时”更改变量值。

从历史上看，SCSS 是一种相当古老的技术。实际上它可以追溯到 2007 年。它的发明动机是 CSS 缺乏某些特性，其中包括变量（以及嵌套、循环和 mixin 等）。

CSS 变量是 CSS 标准的最新补充内容（最后一次调用工作草案是在 2014 年）。它们并没有使 SCSS 变量变得无用，因为您可以对 SCSS 变量执行一些 CSS 变量（据我所知）无法执行的操作，例如颜色计算。

另一方面，您可以使用 CSS 变量执行使用 SCSS 变量无法执行的操作，例如在运行时更改。

顺便说一句：CSS 变量不是官方术语。它们应该称为自定义属性。但每个人都称它们为变量。

附录1

我没有谈论其中的一个区别。您无法使用 JavaScript 更改 SCSS 变量。但是可以使用 JS 访问和更改 CSS 自定义属性