动态生成element-plus的scss变量；SCSS中实现动态颜色变体生成

---

一、动态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等构建工具使用以获得最佳兼容性。