【SCSS】ネスト内でのplaceholder selector活用法。

SCSSで、ネスト内でもplaceholder selectorが使えることに気付いたので、記録。
※BEM記法

要件

.block__ele
.block__ele--red
という元パーツと、文字色が変わっただけのパーツがあるとする。

.block__ele--redは
前者の情報を継承しつつ、色だけ変えるCSSを作りたいとする。

実装

この場合、
.p-blockというセレクター内で、
%__eleという placeholder selectorが使える。

placeholder selectorとは
scssで継承元として@extendで読み込める変数のようなもの。

ただし、これは実態を持つものではないので、&__eleと別に記述し、placeholder selectorの内容を継承せねばならない。

コード

.p-block {
    %__ele {
        //共通するCSS
    }
    &__ele {
        @extend %__ele;
        //元のみのCSS
        &--red {
            @extend %__ele;
            //redのみのCSS
        }
    }

}

記述量も少ないし、いい感じ。

こうすることで、cssの二重読み込みが避けられる。（オリジナルを継承して、オリジナルでおいた色を—redで上書きする、など）（たぶん