Saleor项目SCSS冗余代码优化的简洁写法咨询

嘿，刚接触SASS就碰到这种重复嵌套的问题太正常了！你现在写的.p-around下的各个尺寸类，本质上都是“前缀-尺寸”对应“属性值”的重复模式，用Sass的**循环+映射（Map）**就能完美精简，而且后续维护起来也超方便。

第一步：用Map整理尺寸变量 #

先把你的padding尺寸变量整理成一个键值对Map，这样所有尺寸都集中在一处，方便修改和新增：

// 假设你的变量已经定义好了，比如$none: 0, $x-small: 0.25rem之类的
$padding-sizes: (
  none: $none,
  x-small: $x-small,
  small: $small,
  medium: $medium
);

第二步：用@each循环自动生成样式 #

接下来用Sass的@each循环遍历这个Map，自动生成你原来手写的所有类：

.p {
  &-around {
    @each $size-name, $size-value in $padding-sizes {
      &_#{$size-name} {
        padding: $size-value;
      }
    }
  }
}

这段代码编译后，会和你原来手写的代码完全一样，但现在你只需要维护$padding-sizes这个Map就行——以后要加large或者xlarge尺寸，直接在Map里加一行large: $large，循环会自动帮你生成对应的.p-around_large类，再也不用重复写嵌套结构了！

进阶：做成Mixin复用逻辑 #

如果以后你还要给margin、gap这类属性做类似的尺寸类，可以把这个逻辑封装成Mixin，复用性更强：

@mixin generate-size-modifiers($base-class, $css-property, $sizes-map) {
  .#{$base-class} {
    @each $size-name, $size-value in $sizes-map {
      &_#{$size-name} {
        #{$css-property}: $size-value;
      }
    }
  }
}

// 生成padding-around的类
@include generate-size-modifiers('p-around', 'padding', $padding-sizes);

// 要是以后需要margin-around的类，只需要再调用一次：
// @include generate-size-modifiers('m-around', 'margin', $margin-sizes);

这种方式不仅精简了代码，还让样式结构更清晰，特别适合Saleor这类需要大量自定义工具类的项目。

内容的提问来源于stack exchange，提问作者TheThirdRekt