利用CSS与Sass（SCS） - 基类问题和冗余

Question

我试图通过使用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;
}

有没有办法避免创建不会使用的“通用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 '.##'
  }
}

输出：

 .dark-hr, .light-hr {
   //shared attributes defined by '.##'
 }
 .dark-hr {
   // overrides
 }
 .light-hr {
   // overrides
 }

Answer 1

你想要使用的是一个 扩展课堂 （我称之为“沉默类”），它通过使用A表示 % 代替 ..

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

Answer 2

你通常不会这样做：

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

Answer 3

我的这种模式是一个mixin：

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

这具有可扩展的额外优势，因此如果您发现自己需要多个具有真正类似的属性的选择器，则可以在变量中添加：

@mixin generic-hr($background-color: transparent) { 
  width: 100%;
  height: 1px;
  margin: 15px 0px; 
  background-color: $background-color;
}
.dark-hr {
  @include generic-hr(#595959);
}
.light-hr {
  @include generic-hr(#cccccc);
}
.medium-hr {
  @include generic-hr(#818181);
}