---

一、动态css变量

1.生成内容

在我们修改element-plus主题色时候，会自己定义primary、success、warning、danger、error、info状态色；但是对应的细节亮度css变量手动书写太麻烦，且规则不一定是对的。

2.动态生成css变量

在SCSS中实现动态颜色变体生成，可以通过混合宏(mixin)和函数(function)来实现。以下是完整的SCSS解决方案：

2.1新增_color-utils.scss（不推荐）

// 颜色计算函数
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

// 生成变体的混合宏
@mixin generate-color-variants($name, $base-color) {
  --el-color-#{$name}: #{$base-color};
  --el-color-#{$name}-light-3: #{shade($base-color, 30%)};
  --el-color-#{$name}-light-5: #{shade($base-color, 50%)};
  --el-color-#{$name}-light-7: #{shade($base-color, 70%)};
  --el-color-#{$name}-light-8: #{shade($base-color, 80%)};
  --el-color-#{$name}-light-9: #{shade($base-color, 90%)};
  --el-color-#{$name}-dark-2: #{tint($base-color, 20%)};
}

// 暗黑模式适配混合宏
@mixin generate-dark-variants($name, $base-color) {
  --el-color-#{$name}: #{tint($base-color, 20%)};
  --el-color-#{$name}-dark-2: #{$base-color};
}

2.2新增_color-utils.scss（推荐）

具有按钮的hover效果，且按钮的disabled颜色也有

@use "sass:color";

// 增强版颜色混合函数
@function adjust-hover($base, $percentage: 10%) {
  @if type-of($base) == "string" and str-index($base, "var(") {
    @return unquote("color-mix(in srgb, #{$base} 90%, white 10%)");
  }
  @return color.mix(white, $base, $percentage);
}

@function adjust-active($base, $percentage: 20%) {
  @if type-of($base) == "string" and str-index($base, "var(") {
    @return unquote("color-mix(in srgb, #{$base} 80%, black 20%)");
  }
  @return color.mix(black, $base, $percentage);
}

@mixin generate-color-variants($name, $base-color) {
  --el-color-#{$name}: #{$base-color};
  --el-color-#{$name}-light-3: #{adjust-hover($base-color, 30%)};
  --el-color-#{$name}-light-5: #{adjust-hover($base-color, 50%)};
  --el-color-#{$name}-light-7: #{adjust-hover($base-color, 70%)};
  --el-color-#{$name}-light-8: #{adjust-active($base-color, 80%)};
  --el-color-#{$name}-light-9: #{adjust-active($base-color, 90%)};
  --el-color-#{$name}-dark-2: #{adjust-active($base-color, 20%)};

  // 专门为按钮添加的hover变量
  --el-button-#{$name}-hover-bg-color: #{adjust-hover($base-color)};
  --el-button-#{$name}-active-bg-color: #{adjust-active($base-color)};
}

2.3theme.scss引入使用

@use './color-utils' as color;

:root {
  @include color.generate-color-variants('primary', #007d7b);
  @include color.generate-color-variants('success', #8bc34a);
  @include color.generate-color-variants('warning', #ffc107);
  @include color.generate-color-variants('danger', #f56c6c);
  @include color.generate-color-variants('error', #ff5722);
  @include color.generate-color-variants('info', #909399);
}

html.dark {
  @include color.generate-color-variants('primary', #0084cb);
  @include color.generate-color-variants('success', #60c888);
  @include color.generate-color-variants('warning', #d7bf0a);
  @include color.generate-color-variants('danger', #b75959);
  @include color.generate-color-variants('error', #cd7b00);
  @include color.generate-color-variants('info', #909399);
}

该方案通过SCSS原生颜色函数实现动态计算，使用时只需修改theme.scss中的基础色值即可自动生成全套主题变量。建议配合PostCSS或Vite等构建工具使用以获得最佳兼容性。