:root 和简单变量有什么区别

Question

有人可以向我解释一下:root 中的变量和上面的变量有什么区别吗？为什么我们不能只使用一种语法（使用& 或--）或者只是将$primary 和$secondary 放在:root{...} 中？

$primary: #ffcc00;
$secondary: #4b4b4b;

:root{ 
  --data-color-primary: #{$primary};
  --data-color-secondary: #{$secondary};
}

Answer 1

$primary 和 $secondary 是 SCSS variables。编译后，它们会被替换为它们的值 #ffcc00 和 #4b4b4b。当它们像您的情况一样位于文件的顶部时，它们可以在文件中的任何位置以及导入的位置访问。如果您在:root 中声明它们，它们将被限定范围，并且仅在其中可见。

另一方面，--data-color-primary 和--data-color-secondary 是CSS variables（也称为自定义属性）。它们可以被继承，所以为了让它们对每个元素可用，我们在:root 中声明它们，它代表页面中的html 元素。

现在，为什么你同时拥有它们？好吧，没有理由这样做。你可以简单地做如下，编译后你会得到的结果：

:root{ 
  --data-color-primary: #ffcc00;
  --data-color-secondary: #4b4b4b;
}