css - 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

使用したいのは拡張クラス（私はそれらを「サイレントクラス」と呼びます）です。これは、の%代わりに使用することで示され.ます。

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