scss与less主题切换对比

// 设置主题模板函数
.common-theme(@backgroundColor, @color) {
  .class__A {
    background-color: @backgroundColor;
    color: @color;
  }
}

// 实现主题-亮色
.theme-light {
  .common-theme(#fff, #d9d9d9);
}
// 实现主题-暗色
.theme-dark {
  .common-theme(#000, #fff);
}

// 主题配置
$theme-config: (
  light: (
    backgroundColor: #fff; color: #d9d9d9;,
  ),
  dark: (
    backgroundColor: #000; color: #fff;,
  ),
);
@each $theme, $config in $theme-config {
  // 属性名使用变量时需要使用#{}包裹
  .theme-#{$theme} {
    .class__A {
      background-color: map-get($config, "backgroundColor");
      color: map-get($config, "color");
    }
  }
}

@mixin common-theme($backgroundColor, $color) {
  .class__A {
    background-color: $backgroundColor;
    color: $color;
  }
}
// 亮色
.theme-light {
  @include common-theme(#fff, #d9d9d9);
}
// 暗色
.theme-dark {
  @include common-theme(#000, #fff);
}