SCSS使用变量动态修改elmentUI元素样式

// 假设我们需要根据主题变量来调整elementUI组件的样式
// 首先，我们需要定义一些主题变量
$--theme-color: #f56c6c;
$--font-size-base: 14px;
 
// 然后，我们可以使用SCSS的@mixin特性来定义一个可重用的样式
@mixin themeify($color: $--theme-color, $fontSize: $--font-size-base) {
  color: $color;
  font-size: $fontSize;
}
 
// 使用elementUI的组件，比如Button，并应用我们的themeify mixin
.el-button {
  @include themeify;
}
 
// 如果需要针对不同的主题进行样式覆盖，可以定义新的mixin或变量，并在主题更换时重新调用themeify mixin
$--theme-color-light: #409eff;
$--font-size-base-light: 12px;
 
// 在需要切换主题的地方，重新调用themeify mixin
.el-button {
  @include themeify($color: $--theme-color-light, $fontSize: $--font-size-base-light);
}

这个例子展示了如何使用SCSS变量和mixin来实现一个主题化系统，在不修改elementUI源代码的前提下，根据不同的主题需求来调整元素的样式。这种方法可以极大地提高样式的维护性和灵活性。