如何为SCSS变量设置默认值？使用!default及@use with遇问题

问题说明 #

你需要为变量设置默认值，同时允许通过@use ... with()修改，还想实现类似CSS变量的fallback效果（var(--color) | #000）。之前的代码存在语法问题，且混淆了Sass变量机制和CSS原生变量的fallback逻辑。

1. 正确实现Sass变量默认值与重写 #

先修正代码语法错误，确保@use ... with()能正常工作：

var.scss（定义带默认值的变量）

$color: #000 !default;

main.scss（导入并修改变量）

@use 'var' with (
  $color: red
);

// 使用变量时需通过模块名访问
body {
  color: var.$color;
}

编译后输出：

body {
  color: red;
}

如果不添加with块，编译时会自动使用默认值#000。

2. 结合CSS变量实现Fallback效果 #

若需要同时支持Sass变量重写和CSS层面的fallback（类似var(--color, #000)），可以这样编写：

var.scss

$color: #000 !default;
// 将Sass变量映射为全局CSS变量
:root {
  --color: #{$color};
}

main.scss

@use 'var' with (
  $color: red
);

// 使用CSS变量并指定fallback值
body {
  color: var(--color, #000);
}

编译后输出：

:root {
  --color: red;
}
body {
  color: var(--color, #000);
}

这样既可以通过Sass的@use with修改默认值，也能在CSS层面保留fallback逻辑，当--color未定义时自动启用#000作为备选值。

关键注意点 #

• !default是Sass层面的默认值机制，仅对@use with的重写生效，无法直接实现CSS变量的fallback效果，二者属于不同层级的功能。
• 模块导入的变量必须通过模块名.变量名的形式访问，若想省略模块名，可使用@use 'var' as *（不推荐，易引发变量冲突）。

内容的提问来源于stack exchange，提问作者Eli-ott