よくSassの特徴としてネストが挙げられる。
中にはこれをメリットとして捉える人もいるようで、ネストさせないとSassを使う意味あるのかと質問を受けることがあった。昨今はCSSにも設計思想が持ち込まれており、ほとんどのタグにユニークなクラスをつけることが多いため、個人的にはネストさせる状況はほとんどないと思っている。
その上でSassを使う自分なりの利点をまとめてみた。
あくまで個人的な見解なので、他の意見とかあればぜひ伺いたいです。
Sassの利点
個人的に思う利点は以下の2点だ
- ファイルを分割できる
- 変数やmixinで特定の値や記述を使いまわせる
ファイルを分割できる
10,000行のCSSとかを今でも稀に見ることがある。
パーシャルでコンポーネントごとにファイルを分割すると1ファイルの記述量が圧倒的に減り、視認性もよくなる。また複数人で開発するときにも楽だ。CSSでもimportを使えば同じことができるが、ファイル分リクエストが発生するためパフォーマンスの観点から良い選択とは言えない。
変数やmixinで特定の値や記述を使いまわせる
煩わしいカラーコードやviewportの指定などは変数にぶち込む。
また、flex系の指定はIEやSafariでバグがあったりもするので、プレフィックスやポリフィル的な指定も含めmixin化するのがいいと思う。
@mixin flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
}
ネストのデメリット
ネストに関してはデメリットもあると思っており、よく以下のような記述を目にする。
.parentClass {
&__child {
}
}
↑はアンチパターンだ。改修とかでコードを追う場合、parentClass__childでは検索できず、.parentClassを検索して、ネストされているセレクタの中から__childを見つける必要がある。かなりめんどい。
以下がベストプラクティス。
.parentClass {
...
}
.parentClass__child {
...
}
extendは利点じゃないの？
Sassにはextendという便利な機能も備わっている。extendについては以下の説明がわかりやすい。
https://terkel.jp/archives/2011/12/sass-extend/
個人的にextendは極力使わないほうがいいと思っている。影響範囲がつかみにくく、予期せぬ崩れを起こす場合があるからだ。
どうしても使いたい場合はコンポーネントの以下に注意を払う。
- コメント
- コンテキスト
コメント
継承元ファイルには必ずどのコンポーネントでextendしているかを明記する必要がある。これをしないと影響範囲がわからない。
コンテキスト
見た目が同じというだけの理由でextendしていると、改修の時に予期せぬ崩れが発生する。
例えば商品一覧とブログ一覧が同じ見た目でも役割が全然違うため、商品一覧を改修したからブログ一覧も改修するとはならない。コンテキストが同じもののみextendを使用するのが良いと思う。
最後に
フロントエンドを生業にしている人からすれば当たり前の内容かもしれない。
しかしあまりフロントに馴染みのないサーバーサイドよりの人やSassをそこまで学んでいないデザイナーには参考になるのかなと思いまとめてみました。少しでもこの記事が役に立つことを願う。