前回は無謀飲食で胃が苦しくなった山住ですが、今回はまたコーディングのお話しに戻ります笑

今回はextendとプレースホルダーについてお話ししていこうと思います。

extendを使うと、別のセレクタで使っている内容をそのまま持ってくることが出来ます。

こう書くと、以下のように出力されます。

いや、最初からセレクタをカンマで区切って書けばいいやん、、、、と思うかもしれませんね（汗）

ですが、.box1のスタイルをそのまま拝借し、さらに.box2独自のスタイルを書き加えたい場合などには便利です。

こう書くと、以下のように共通するスタイルは纏められ、独自のスタイルは別個に出力されます。

共通部分は全て纏められるので、出力後のコードもスッキリします！

ではextendと絡めて、プレースホルダーセレクタのご紹介をここからしていこうと思います。

まずプレースホルダーセレクタを『%セレクタ名』で書きます。

そしてこれを@extendで呼び出します。

この場合、コンパイル後のcssに%ph{〜}の部分は出力されず、呼び出し先の親セレクタに置き換わって出力されます。

プレースホルダーで使い回し用のコードを一個作っておき、それを呼び出して使うというやり方が出来るので、生産性が上がりそうです！

さて、そういえば共通のスタイルを作って呼び出す・・・どこかで聞いた気がします。

そう、mixinですね！

※mixinについては以下の記事を参照！

CSSコーディングをしやすくする、SASSのアレコレ

・mixinはコンパイルすると、@includeで呼び出した部分全てにmixinのコードが展開されます。

なので同じコードが幾つも重複して出力されるんですね。

・extendは共通するスタイルが全て纏められ、個別のスタイルのみ別個に出力されます。なのでコンパイル後のコード量を減らす事が出来ます。

ですがmixinの場合は引数を取ることが出来るので、柔軟なスタイルの記述が可能です。

『使うプロパティは同じだけど値を毎回変えたい』場合はmixin

『共通した記述は徹底的に纏めたい！』場合はextend

という感じで使い分けると良いかもしれません！

どちらも『同じ記述を繰り返し書かない』という利点は共通しているので、上手に使い分ければ生産性UPが可能なのは間違いなしです！