如何用SCSS同时生成默认值与CSS变量以兼容IE11？

可以通过SCSS的**混合宏（Mixin）**实现你的需求，无需引入任何第三方工具，完全用原生SCSS语法完成自动生成硬编码默认值+CSS变量的输出。

实现步骤 #

1. 定义SCSS变量与全局CSS变量
   先统一维护SCSS变量作为默认值，同时映射到:root下的CSS变量，深色模式直接覆盖对应CSS变量即可：

// 定义SCSS默认变量
$text-color: red;
$bg-color: white;

// 全局CSS变量（与SCSS变量同步）
:root {
  --text-color: #{$text-color};
  --bg-color: #{$bg-color};
}

// 深色模式覆盖
:root.dark {
  --text-color: black;
  --bg-color: #333;
}

2. 编写复用的Mixin
   创建一个混合宏，自动帮你输出「硬编码值 + CSS变量」的组合：

@mixin css-var($property, $scss-variable, $var-name: null) {
  // 如果未指定CSS变量名，默认使用SCSS变量的名称
  $css-var-name: if($var-name, $var-name, $scss-variable);
  // 输出IE11兼容的硬编码值
  #{$property}: $scss-variable;
  // 输出CSS变量，支持现代浏览器主题切换
  #{$property}: var(--#{$css-var-name});
}

3. 在样式中使用Mixin
   调用混合宏时只需传入属性名和对应的SCSS变量即可：

p {
  @include css-var(color, $text-color);
}

body {
  @include css-var(background-color, $bg-color);
}

编译后的CSS结果 #

完全符合你的预期：

:root {
  --text-color: red;
  --bg-color: white;
}

:root.dark {
  --text-color: black;
  --bg-color: #333;
}

p {
  color: red;
  color: var(--text-color);
}

body {
  background-color: white;
  background-color: var(--bg-color);
}

额外说明 #

• 如果CSS变量名和SCSS变量名不一致，可以通过第三个参数指定：

  p {
    @include css-var(color, $text-color, 'custom-text-color');
  }
  

  编译后会输出：

  p {
    color: red;
    color: var(--custom-text-color);
  }
  

• 所有默认值只需维护SCSS变量，无需重复编写，修改时只改一处即可，完全符合你的工作流需求。

内容的提问来源于stack exchange，提问作者Plagiatus