SCSS中如何让&-tableau与&-tabbed样式一致且不新增类？

嘿，刚接触SCSS的话，这个需求其实很好解决，给你两种简单的方法，都不用新增类就能让&-tableau和&-tabbed样式完全一致：

方法一：合并选择器（最直接简洁） #

把需要共享样式的选择器写在一起，共用同一个样式块，编译后的CSS会自动将这两个选择器合并，实现样式完全一致：

&-tabbed, &-tableau {
  // 原来&-tabbed的所有样式代码
}
&-list {
  // some other code
}

这种方法适合你还没写完&-tabbed样式的情况，直接一次性定义两个选择器的共同样式，避免重复代码。

方法二：使用@extend继承样式 #

如果&-tabbed已经写了大量样式，不想移动代码结构，可以用SCSS的@extend功能让&-tableau直接继承它的所有样式：

&-tabbed {
  // some code（原来的&-tabbed样式）
}
&-list {
  // some other code
}
&-tableau {
  @extend &-tabbed;
}

编译后的CSS会把&-tabbed和&-tableau合并到同一个样式规则里，效果和方法一完全一致，适合不想改动已有代码的场景。

补充说明 #

这里的&是SCSS的父选择器占位符，比如你的父选择器是.component，那么&-tabbed会编译成.component-tabbed，&-tableau会编译成.component-tableau，两种方法最终都会生成包含这两个类的共同样式规则，完全满足你的需求。

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