如何用SASS让父元素的类样式作用于直接子元素？

你的需求完全可以用Sass实现，核心是通过复用变量/循环消除SCSS中的重复代码，同时实现父类样式向直接子元素传递的效果。

为什么你之前的@extend没生效？ #

你之前写的代码：

ul.text-list {
    li {
        @extend .text;
    }
}

是强制让ul.text-list下的所有li继承.text样式，但这是固定选择器的继承，和你期望的「给任意父元素加特定类后，让父元素的其他类样式作用于子元素」的动态逻辑不匹配，所以达不到预期效果。

优化后的SCSS实现 #

我们可以通过定义权重映射变量+循环遍历来复用样式逻辑，彻底避免重复代码：

1. 定义全局字体权重映射 #

先把字体权重的变体统一存到一个map里，方便后续复用：

// 定义字体权重映射，新增变体只需在这里添加
$font-weights: (
  light: $font-weight-light,
  semibold: $font-weight-semibold,
  bold: $font-weight-bold
);

2. 重构原有的.text类 #

用循环生成所有权重变体，避免重复编写&.t-*的代码：

.text {
    font-weight: $font-weight-normal;
    line-height: $line-height-medium;
    color: $grey-500;

    // 循环生成所有字体权重变体
    @each $name, $weight in $font-weights {
        &.t-#{$name} {
            font-weight: $weight;
        }
    }
}

3. 实现.text-children的复用逻辑 #

同样用循环遍历权重映射，生成子元素的样式继承，无需重复写每个变体的@extend：

.text-children {
    // 让直接子元素继承.text的基础样式
    & > * {
        @extend .text;
    }

    // 循环生成子元素的权重变体样式
    @each $name, $weight in $font-weights {
        &.tc-#{$name} > * {
            @extend .t-#{$name};
        }
    }
}

使用方式 #

现在你可以像期望的那样编写HTML：

<ul class="text-list tl-type-disc text-children tc-light">
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
</ul>

（注：如果要处理margin类的子元素继承，也可以套用同样逻辑——定义margin参数的映射变量，循环生成margin-children相关样式）

额外说明 #

• 这种方式维护成本极低：以后新增字体权重或其他样式变体，只需在对应的map里添加条目，无需修改多处代码。
• 完全用CSS实现样式传递，避免了JS操作DOM的开销，更符合前端性能最佳实践。

内容的提问来源于stack exchange，提问作者Fernando Gómez de la Varga