SCSSのメリット
大きく分けて２つ
- ネスト記法
-
@mixinによるCSS定義のコンポーネント化,@extendによるCSS定義の流用
ネスト
クラス＞クラス
.parent {
.child {
}
}
クラス＞メディアクエリ
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
@media(min-width: 768px) {
grid-template-columns: repeat(4, 3fr);
}
}
クラス＞:hoverなどの疑似クラス
.parent {
&:hover {
}
}
メモ：@extendと@mixinの違い
@extendの特徴
- 継承対象に拒否権はない
- 継承なので、宣言箇所の基底の定義になる
@mixinの特徴
- コンポーネント化対象は、必ず
@mixinの宣言が必要で、利用側は、@includeでの参照が必要。@extendとは対照的。 - 記述の持ち込みなので、宣言箇所にそのままロードされる
- 上記の性質から、
@extendよりミクロなコードの流用が可能に。
多用は
@extendも@mixinも多用するとヤバイ香りがする。
@extendは継承対象に拒否権がないため、自由な変更ができなくなる可能性がある。
@mixinは宣言が必要なものの、ミクロな流用が可能になるため、乱用されると可読性が下がる可能性もある。
実務では適切なルール化が必要と思われる。
CSSでも出来ること
変数宣言
:root {
--primary-color: #FF00FF;
}
div {
color: var(--primary-color);
}
個人的な結論
利用しようかと思います。
やはり、ネストによる可読性の向上は魅力的です。
@extendや@mixinはもう少し情報収集が必要かもしれません。
参考
なぜSassが必要なの？
SCSSでできること
Sass(SCSS)のmixin, extendなどまとめ
プログラマーから見た、SCSSの正しい(かもしれない)使いかた
sassのmixinとextend、ちゃんと考えて使わないとcssが地獄。
scssで＠mixinを使うのと、htmlでclass指定する何が違う
CSS カスタムプロパティ (変数) の使用