CSS VS SASS（SCSS） - 基本クラスの問題と冗長性を利用する

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;
}

使用されない '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 '.##'
  }
}

出力：

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

Answer 1

あなたが使いたいことはANです クラスを拡張する （私はそれらを使って表示することによって示されている「それらを「サイレントクラス」と呼びます） % 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 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);
}