SCSSで@extend（継承・書き換え）と@mixin（単体で使わないパーツ）のどちらを利用するのがいいのか、検証してみました。
例：共通する部分と違う部分を理解する
画像をご覧ください。メインカラーが青色で水色をワンポイントに使用したボックスが並ぶデザインです。このボックスと色指定について今回考えたいと思います。
◆同じ点
・ボーダーが角丸、ボックスサイズ、文字の色が白
◆ 違う点
・背景の色
記述方法として
1. ＠mixinで背景色を含めない基本的なボックスパーツを用意し、背景色だけ個別に指定する方法
2. ＠extendで青の背景色も含めた基本的なボックススタイルを用意し、そのスタイルを継承し背景色だけ水色に上書きする方法
で試します。
@mixinでパーツとして利用する方法
個別に用意したクラスで、青い背景の「box--blue」、水色の背景の「box--light_blue」に背景色だけ指定し、@mixinで基本的なボックスのスタイルを指定しておいたものを読み込んだ。
See the Pen @mixinでの指定 by miwa-h-tbrave (@miwa-h-tbrave) on CodePen.
SCSSを見て「box--blue」→青、「box--light_blue」→水色とボックスの色を連想できるクラス名で分けられているので、初めてみた人でも理解できそうな整理された記述ルールに感じる。
↓CSSにコンパイルした後。@mixinはそれぞれのクラスの中でパーツとしてスタイルが読み込まれるので、例えばheader、fotterなど範囲の離れたクラス同士が@extendのようにグルーピングされて変になることがない。
@extendで継承・上書きとして利用する方法
青がメインカラーで基本的な色として考え、ボックススタイル「box」に青い背景も一緒に指定した。ボックスが水色の時は基本的なボックススタイルを継承しつつ背景の青色を水色へ部分的に上書きするようにした。
See the Pen mjLYqX by miwa-h-tbrave (@miwa-h-tbrave) on CodePen.
↓CSSにコンパイルした後。「box「box--light_blue」はグルーピングされ「box--light_blue」の背景色のみ別で上書きされている@mixinに比べ記述が少ない。
背景色だけ上書きするという、シンプルな考えで記述もCSSにコンパイル後の記述も@mixinに比べ少ない。デメリットとして修正する際、他に影響する範囲が出て困りそうです。SCSS制作者と管理する人が違う場合は複雑な使用方法を避けないとならない。
@mixinと@extendの使い分けまとめ
パーツとして利用する場合@mixinで初めから書けそうですが。そうでない場合は普通にクラスで書いてしまい後でそのクラスを何度か利用することが起きそうです。すると@extendを使うことになります。@mixinと@extendについて考えてみましたが、運用後を考え設計をきちんとしないと綺麗な使い分は難しいと感じました。
@mixin・・・同じスタイルを複数のページや範囲で使用するパーツ
@extend・・・特定の場所でしか使わないスタイル、グルーピングでコンパイルされても良さそうな全共通の内容スタイル
上記のどれに当たるかをはじめに考え、設計したいと思います。以上、テクノブレイブ名古屋オフィス開発1Gでした。
