如何在[data-theme]中定义SASS变量并兼容darken等SCSS函数？

问题根源 #

你遇到的两个问题本质是SCSS编译时特性和CSS变量运行时特性的冲突：

1. 用var(--primary)给SCSS变量赋值后调用darken()报错：SCSS函数是编译时执行的，var(--primary)对SCSS来说只是字符串，不是可识别的颜色值，自然无法处理。
2. 在[data-theme]内定义SCSS变量导致“Undefined variable”：SCSS变量是块级作用域，仅在定义它的选择器内部有效，外部无法访问。

可行解决方案：先定义SCSS主题映射，再生成CSS变量 #

核心思路是用SCSS变量管理所有主题色（让编译时函数能正常工作），再通过循环生成不同主题下的CSS变量（实现运行时切换），同时导出全局可用的SCSS变量。

1. 重构base.scss代码

// 1. 定义所有主题的SCSS颜色映射
$themes: (
  light: (
    primary: #42b983,
    secondary: #35495e,
    // 可添加更多颜色变量
  ),
  dark: (
    primary: #359469,
    secondary: #2c3e50,
  )
);

// 2. 导出全局SCSS变量（默认使用light主题，编译时生效）
$primary: map-get(map-get($themes, light), primary);
$secondary: map-get(map-get($themes, light), secondary);

// 3. 循环生成[data-theme]下的CSS变量，包括处理后的颜色
@each $theme-name, $theme-colors in $themes {
  [data-theme="#{$theme-name}"] {
    // 基础颜色变量
    --primary: #{map-get($theme-colors, primary)};
    --secondary: #{map-get($theme-colors, secondary)};
    // 用SCSS函数处理后的颜色（编译时生成真实颜色值）
    --primary-dark: #{darken(map-get($theme-colors, primary), 10%)};
    --secondary-light: #{lighten(map-get($theme-colors, secondary), 10%)};
  }
}

// 4. 可选：定义mixin，快速生成主题感知的样式
@mixin theme-style($property, $color-key) {
  @each $theme-name, $theme-colors in $themes {
    [data-theme="#{$theme-name}"] & {
      #{$property}: map-get($theme-colors, $color-key);
    }
  }
}

2. 组件内使用方式

方式一：用CSS变量实现动态主题切换

@import '@/styles/base.scss';

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary-dark);
  color: #fff;
}

方式二：用导出的SCSS变量（适用于不需要动态切换的静态样式）

@import '@/styles/base.scss';

.static-box {
  // 编译后直接生成light主题的颜色值
  border: 1px solid $secondary;
}

方式三：用mixin生成多主题样式

@import '@/styles/base.scss';

.title {
  // 编译后会生成[data-theme=light]和[data-theme=dark]下的color样式
  @include theme-style(color, primary);
  font-size: 18px;
}

3. 主题切换逻辑保持不变

继续通过修改html标签的data-theme属性切换主题即可：

// 示例：切换到dark主题
document.documentElement.setAttribute('data-theme', 'dark');

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