プレースホルダーセレクター

Sassには、「プレースホルダー」として知られる特別な種類のセレクターがあります。これはクラスセレクターとよく似た見た目と動作をしますが、%で始まり、CSS出力には含まれません。実際、プレースホルダーセレクターを含む複合セレクター（カンマで区切られたもの）はCSSに含まれず、セレクターがすべてプレースホルダーを 含むスタイルルールも含まれません。

プレイグラウンド

SCSS構文

.alert:hover, %strong-alert {
  font-weight: bold;
}

%strong-alert:hover {
  color: red;
}
プレイグラウンド

Sass構文

.alert:hover, %strong-alert
  font-weight: bold


%strong-alert:hover
  color: red

CSS出力

.alert:hover {
  font-weight: bold;
}

出力されないセレクターには何の用途があるのでしょうか？それは拡張することができます！クラスセレクターとは異なり、プレースホルダーは拡張されない限りCSSを乱雑にせず、ライブラリのユーザーに特定のクラス名を HTMLで使用することを強制しません。

プレイグラウンド

SCSS構文

%toolbelt {
  box-sizing: border-box;
  border-top: 1px rgba(#000, .12) solid;
  padding: 16px 0;
  width: 100%;

  &:hover { border: 2px rgba(#000, .5) solid; }
}

.action-buttons {
  @extend %toolbelt;
  color: #4285f4;
}

.reset-buttons {
  @extend %toolbelt;
  color: #cddc39;
}
プレイグラウンド

Sass構文

%toolbelt
  box-sizing: border-box
  border-top: 1px rgba(#000, .12) solid
  padding: 16px 0
  width: 100%

  &:hover
    border: 2px rgba(#000, .5) solid

.action-buttons
  @extend %toolbelt
  color: #4285f4


.reset-buttons
  @extend %toolbelt
  color: #cddc39

CSS出力

.reset-buttons, .action-buttons {
  box-sizing: border-box;
  border-top: 1px rgba(0, 0, 0, 0.12) solid;
  padding: 16px 0;
  width: 100%;
}
.reset-buttons:hover, .action-buttons:hover {
  border: 2px rgba(0, 0, 0, 0.5) solid;
}

.action-buttons {
  color: #4285f4;
}

.reset-buttons {
  color: #cddc39;
}

プレースホルダーセレクターは、各スタイルルールが使用されるかどうかわからないSassライブラリを作成する際に役立ちます。経験則として、自分のアプリのためだけにスタイルシートを作成する場合は、クラスセレクターが 利用可能であれば、それを拡張する方が良いことがよくあります。