如何在SCSS中结合@if与@extend基于选择器应用样式规则？

看起来你在Sass里用@extend+@if的时候踩了个小坑——因为@extend是编译时处理的，如果你把判断放在一个包含多个选择器的代码块里，&会代表整个选择器组，而不是单个选择器，所以你的@if条件其实没有逐个匹配每个元素，导致全部应用了第一个分支的样式。别担心，这里有几个靠谱的解决方案：

方法1：用@each循环精准生成样式（最推荐） #

这种方式清晰易维护，尤其适合需要给多个选择器设置不同对齐的场景。你可以先定义一个映射表，把选择器名称和对应的对齐方式绑定，再循环生成样式：

// 定义选择器与对齐方式的映射
$align-config: (
  "dom-element-1": left,
  "dom-element-2": right,
  "dom-element-3": left,
  "dom-element-4": right
);

// 循环生成每个选择器的样式
@each $selector-name, $align in $align-config {
  .#{$selector-name} {
    text-align: $align;
  }
}

编译后会直接生成每个选择器对应的text-align规则，完全不会出错，后续修改只需要调整映射表就行。

方法2：基于选择器关键词动态判断 #

如果你的选择器有规律（比如带-left后缀的要左对齐，带-right的要右对齐），可以用Sass的字符串检测函数来动态判断：

// 匹配所有包含目标关键词的选择器
[class*="align-"] {
  @if str-index(&, "-left") {
    text-align: left;
  } @else if str-index(&, "-right") {
    text-align: right;
  }
}

这里str-index(&, "-left")会检测当前选择器（&代表当前选择器）是否包含-left字符串，匹配成功就应用对应的对齐样式。

方法3：修正你原来的@extend写法 #

如果你坚持要用@extend，需要避免在选择器组里做判断，而是单独给每个目标选择器处理，或者用循环来批量@extend：

// 定义占位符选择器
%text-left { text-align: left; }
%text-right { text-align: right; }

// 分组定义需要对齐的选择器
$left-selectors: .dom-element-1, .dom-element-3;
$right-selectors: .dom-element-2, .dom-element-4;

// 给左对齐的选择器应用占位符
@each $selector in $left-selectors {
  #{$selector} {
    @extend %text-left;
  }
}

// 给右对齐的选择器应用占位符
@each $selector in $right-selectors {
  #{$selector} {
    @extend %text-right;
  }
}

这种方式会把指定的选择器分别关联到对应的占位符样式，不会出现批量判断错误的问题。

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