Sass循环优化：避免默认变体与修饰类代码重复

针对你遇到的代码重复问题，可以通过以下两种方式优化，彻底消除属性代码的重复：

方案一：动态生成选择器（单循环实现） #

利用Sass的if()函数根据尺寸类型动态生成选择器列表，只需要编写一次样式属性：

$elementSizes: (
  sm: (
    fontSize: 0.875rem,
    height: 42px,
  ),
  md: (
    fontSize: 1rem,
    height: 48px,
  ),
  lg: (
    fontSize: 1.125rem,
    height: 54px,
  ),
);

.element {
  @each $size, $values in $elementSizes {
    // 根据尺寸是否为md生成对应的选择器
    $selectors: if($size == md, '&, &.size-#{$size}', '&.size-#{$size}');
    
    #{$selectors} {
      font-size: map-get($values, fontSize);
      height: map-get($values, height);
    }
  }
}

这种方式保持了单一循环的结构，通过条件判断生成不同的选择器，属性代码只写一次，完全消除重复。

方案二：拆分默认样式与修饰类 #

先给.element设置默认的md样式，再通过循环统一处理所有尺寸修饰类，逻辑更直观：

$elementSizes: (
  sm: (
    fontSize: 0.875rem,
    height: 42px,
  ),
  md: (
    fontSize: 1rem,
    height: 48px,
  ),
  lg: (
    fontSize: 1.125rem,
    height: 54px,
  ),
);

.element {
  // 应用默认的md样式
  $mdStyles: map-get($elementSizes, md);
  font-size: map-get($mdStyles, fontSize);
  height: map-get($mdStyles, height);
  
  // 循环生成所有尺寸修饰类的样式
  @each $size, $values in $elementSizes {
    &.size-#{$size} {
      font-size: map-get($values, fontSize);
      height: map-get($values, height);
    }
  }
}

这种方式将默认样式单独提取，后续循环统一处理所有修饰类，即使.element.size-md的样式和默认一致，也不会产生冲突，同时避免了属性代码的重复。

内容的提问来源于stack exchange，提问作者Lennart van Deursen