使用&运算符生成的text1-sm类未继承text1属性，如何实现样式叠加？

你的问题出在SCSS的嵌套写法上：当前的.text1-sm选择器仅包含font-size: small，没有继承.text1的基础样式。因为SCSS中的&是父选择器的拼接，只会生成新的选择器，不会自动把父选择器的样式复制到子选择器中。下面提供几种可行的解决方案：

方案1：使用混合宏（@mixin）复用基础样式 #

把.text1的基础样式封装成混合宏，然后在基础类和所有变体类中引入：

// 定义基础样式混合宏
@mixin text1-base {
  font-weight: normal;
  font-family: cursive;
  color: green !important;
}

// 基础类
.text1 {
  @include text1-base;
}

// 各个变体类，同时引入基础样式和自身尺寸
.text1 {
  &-xxs {
    @include text1-base;
    font-size: smaller;
  }

  &-sm {
    @include text1-base;
    font-size: small;
  }

  &-md {
    @include text1-base;
    font-size: medium;
  }

  &-lg {
    @include text1-base;
    font-size: large;
  }
}

编译后的CSS会为每个变体类单独包含基础样式和尺寸样式，确保.text1-sm能同时拥有两类样式。

方案2：使用占位符（%）实现样式继承 #

占位符是SCSS中用于样式复用的工具，编译后会将所有引用该占位符的选择器合并，更节省CSS体积：

// 定义基础样式占位符
%text1-base {
  font-weight: normal;
  font-family: cursive;
  color: green !important;
}

// 基础类继承占位符样式
.text1 {
  @extend %text1-base;
}

// 变体类同时继承基础样式并添加自身尺寸
.text1-xxs {
  @extend %text1-base;
  font-size: smaller;
}

.text1-sm {
  @extend %text1-base;
  font-size: small;
}

.text1-md {
  @extend %text1-base;
  font-size: medium;
}

.text1-lg {
  @extend %text1-base;
  font-size: large;
}

编译后的CSS会把所有引用占位符的选择器合并，比如：

.text1, .text1-xxs, .text1-sm, .text1-md, .text1-lg {
  font-weight: normal;
  font-family: cursive;
  color: green !important;
}

.text1-xxs { font-size: smaller; }
.text1-sm { font-size: small; }
/* ... 其他变体样式 */

方案3：手动合并选择器（不推荐，不够灵活） #

如果不想用SCSS的复用特性，也可以直接把基础样式应用到所有相关选择器上：

// 基础样式同时应用给.text1和所有变体类
.text1,
.text1-xxs,
.text1-sm,
.text1-md,
.text1-lg {
  font-weight: normal;
  font-family: cursive;
  color: green !important;
}

// 单独定义每个变体的尺寸
.text1-xxs { font-size: smaller; }
.text1-sm { font-size: small; }
.text1-md { font-size: medium; }
.text1-lg { font-size: large; }

这种方法虽然直观，但后续新增变体时需要手动添加选择器，维护成本较高。

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