多父级下相同子元素的CSS代码能否转换为SCSS？

SCSS的嵌套特性正好能帮你简化这种多父级下重复子元素的代码，给你几种实用的写法：

1. 最直接的嵌套写法（推荐） #

把所有包含相同子元素的父选择器放在一起，然后嵌套子元素样式，这样不用重复写li.accordion-item：

.dark-bg, .image, .parallax {
  li.accordion-item {
    margin: 0;
  }
}

编译后会生成你原来的CSS代码，而且维护起来更方便——要是以后要修改子元素的样式，只需要在嵌套里改一次就行。

2. 通用类重构写法（适合HTML可修改的场景） #

如果你的HTML可以调整，给这三个父元素加一个共同的类名（比如.has-accordion），代码会更简洁：

.has-accordion {
  li.accordion-item {
    margin: 0;
  }
}

这种写法更符合DRY（Don't Repeat Yourself）原则，后续新增类似的父元素时，只需要给它加这个通用类就行。

3. 占位符@extend写法（适合复杂样式复用） #

如果这个子元素的样式以后可能会被其他选择器复用，可以用SCSS的占位符选择器：

%accordion-item-base {
  margin: 0;
}

.dark-bg li.accordion-item,
.image li.accordion-item,
.parallax li.accordion-item {
  @extend %accordion-item-base;
}

这种方式适合样式较多的场景，能避免生成多余的CSS类。

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