SCSS变量赋值报错：如何正确地将CSS变量赋给SCSS变量？

在SCSS中，如果你想将CSS变量（也称为自定义属性）赋给SCSS变量，可能会遇到一些问题，因为SCSS和CSS变量的处理方式不同。CSS变量是在运行时解析的，而SCSS变量是在编译时解析的。因此，直接将CSS变量赋给SCSS变量可能会导致错误。

问题描述

假设你有以下的CSS变量：

:root {
  --primary-color: #3498db;
}

你想将这个CSS变量赋给一个SCSS变量：

$primary-color: var(--primary-color);

这会导致编译错误，因为SCSS无法直接解析CSS变量。

解决方案

为了正确地将CSS变量赋给SCSS变量，你可以使用以下方法：

1. 使用unquote函数：unquote函数可以去掉字符串的引号，使得SCSS变量可以接受CSS变量的值。

$primary-color: unquote("var(--primary-color)");

2. 直接使用CSS变量：如果你不需要在SCSS中使用这个变量进行计算或操作，可以直接在SCSS中使用CSS变量。

.element {
  color: var(--primary-color);
}

3. 使用@mixin或@function：如果你需要在SCSS中进行复杂的操作，可以使用@mixin或@function来处理CSS变量。

@mixin apply-primary-color {
  color: var(--primary-color);
}

.element {
  @include apply-primary-color;
}

示例

以下是一个完整的示例，展示了如何将CSS变量赋给SCSS变量并在SCSS中使用：

:root {
  --primary-color: #3498db;
}

$primary-color: unquote("var(--primary-color)");

.element {
  color: $primary-color;
  background-color: lighten($primary-color, 20%);
}

注意事项

• 编译时与运行时的区别：SCSS变量在编译时被解析，而CSS变量在运行时被解析。因此，SCSS变量不能直接引用CSS变量。
• 浏览器兼容性：CSS变量在现代浏览器中得到了广泛支持，但在一些旧版浏览器中可能不被支持。

通过以上方法，你可以正确地将CSS变量赋给SCSS变量，并在SCSS中使用它们。