Sass/Scss如何实现后缀子类复用父类的基础样式

解决方案 #

你当前的写法只会拼接选择器名称，不会自动继承父选择器的样式属性，可以通过以下两种方式调整SCSS代码实现需求： #

方法1：使用@extend指令直接继承父类样式

这种写法最贴合你当前的代码结构，修改成本最低：

.onetrust_container {
  display: grid;
  place-items: center;
  height: 50vh;
  text-align: center;

  &-map {
    @extend .onetrust_container;
    height: 100vh;
  }
}

编译后会直接输出你期望的CSS效果，-map子类会完整继承父类的所有属性，同时覆盖height配置。 #

方法2：使用占位符选择器抽离公共样式

如果后续还会扩展更多同系列变体，推荐用这种写法减少重复样式代码：

// 公共样式占位符，不会单独编译输出
%onetrust_common {
  display: grid;
  place-items: center;
  text-align: center;
}

.onetrust_container {
  @extend %onetrust_common;
  height: 50vh;
}

.onetrust_container-map {
  @extend %onetrust_common;
  height: 100vh;
}

这种写法编译后公共属性只会输出一次，整体CSS体积更小。

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