プレースホルダーセレクタ [Sass/SCSS]

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

使い方

%red {
  color: red;
}

.warning {
  @extend %red;
}

.error {
  @extend %red;
}

上の SCSS をコンパイルすると以下のようになる。

.warning, .error {
  color: red;
}

参考：

Sass の Mixin と Placeholder の使い分け | console.lealog();

Sass の @extend とプレースホルダーセレクタ | E-riverstyle Vanguard

extend・プレースホルダーを使おう！ | ウェブマガジン カミナリ

Getting the most out of Sass placeholders | Hugo Giraudel

複数回 @import/@include した時に重複を防ぐ

$module-placeholders-defined: false !default;
@mixin module-placeholders {
  @if not $module-placeholders-defined {
    $module-placeholders-defined: true;
    %module-object { color: red; }
    %module-object:hover { color: blue; }
  }
}

@include module-placeholders;

参考：

Sass 3.2 からは placeholder selector を使おう | nodot