如何改写SCSS实现复合类名flex等布局多段样式叠加效果

你的需求完全可以实现，当前写法的核心问题是：嵌套拼接出的.flex-r、.flex-r-between属于和.flex完全独立的类名，定义在.flex下的display:flex不会自动应用到后缀拼接的类上，同时你还存在笔误：flex-direction: row被错写为display: row。

基础改写方案 #

用SCSS的@extend继承机制复用属性，避免重复编写代码：

// 定义flex基础属性占位符，不会单独生成冗余CSS
%flex-base {
  display: flex;
}

// 基础flex类
.flex {
  @extend %flex-base;
}

// 带方向的flex类：继承基础属性+新增方向规则
.flex-r {
  @extend %flex-base;
  flex-direction: row;
}
.flex-c {
  @extend %flex-base;
  flex-direction: column;
}

// 带方向+对齐的flex类：继承对应方向类的所有属性+新增对齐规则
.flex-r-between {
  @extend .flex-r;
  justify-content: space-between;
}
.flex-r-even {
  @extend .flex-r;
  justify-content: space-evenly;
}

编译后会自动合并相同属性，最终效果完全匹配需求：

• 单类.flex仅生效display:flex
• 单类.flex-r生效display:flex+flex-direction:row
• 单类.flex-r-between同时生效3个对应属性

进阶批量生成方案 #

如果要覆盖所有方向、对齐、换行的组合，适合用SCSS列表+循环批量生成，后续扩展规则只需要新增配置即可：

%flex-base {
  display: flex;
}

// 可自定义扩展的配置项：[简写: 对应的属性值]
$flex-directions: (
  r: row,
  c: column,
  rr: row-reverse,
  cr: column-reverse
);
$justify-contents: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
  even: space-evenly
);
$align-items: (
  a-start: flex-start,
  a-end: flex-end,
  a-center: center,
  stretch: stretch
);

// 生成基础flex类
.flex {
  @extend %flex-base;
}

// 循环生成所有组合类
@each $key, $val in $flex-directions {
  .flex-#{$key} {
    @extend %flex-base;
    flex-direction: $val;
    
    // 生成方向+水平对齐的组合类
    @each $j-key, $j-val in $justify-contents {
      &-#{$j-key} {
        justify-content: $j-val;
        
        // 生成方向+水平对齐+垂直对齐的组合类
        @each $a-key, $a-val in $align-items {
          &-#{$a-key} {
            align-items: $a-val;
          }
        }
      }
    }
  }
}

该写法可以一键生成全场景的flex工具类，比如.flex-r-between-a-center就对应display:flex+flex-direction:row+justify-content:space-between+align-items:center，不需要手动编写每个类的规则。

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