基于Sass实现动态css样式切换

// 定义一个Sass函数，用于生成不同状态下的样式
@function dynamic-style($base-color) {
  // 定义一个map，包含不同状态的颜色
  $states: (
    default: $base-color,
    hover: darken($base-color, 10%),
    active: darken($base-color, 20%),
  );
 
  // 使用@each循环生成每个状态的样式
  $styles: '';
  @each $state, $color in $states {
    $styles: #{$styles} .button--#{$state} { background-color: $color; }
  }
  @return $styles;
}
 
// 使用这个函数生成不同状态按钮的样式
.button {
  background-color: #f00; // 默认颜色为红色
  // 调用函数并插入生成的样式
  dynamic-style(#f00);
}

这段代码定义了一个名为dynamic-style的Sass函数，它接受一个基础颜色作为参数，并生成一个map，包含了不同状态下的颜色。然后使用@each循环为每个状态生成对应的CSS类，并返回这些类的字符串。在.button类中，我们设置了一个默认的背景颜色，并调用了这个函数来生成其他状态下的样式。这样，我们可以通过改变基础颜色来快速生成一套状态变化的按钮样式，而无需手动编写每一行CSS代码。