小编Dyn*_*Dan的帖子

我正在尝试使用SCSS清理我的CSS以使其更干净.

标准CSS:

.dark-hr,
.light-hr { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
}
.dark-hr {
  background-color: #595959;
}
.light-hr {
  background-color: #cccccc;
}

vs SCSS:

.generic-hr { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
}
.dark-hr {
  @extend .generic-hr;
  background-color: #595959;
}
.light-hr {
  @extend .generic-hr;
  background-color: #cccccc;
}

有没有办法避免创建不会被使用的'generic-hr'类？我希望某种巢能很好地运作.在这种情况下,CSS绝对比SCSS更清晰,更易读.

理想情况下,我需要这个在SCSS中工作:

.## {
  // base class that is not outputted
  .dark-hr {
    //attributes the extend the base class '.##'
  }
  .light-hr {
    //attributes the extend the base class '.##'
  } …