web制作にsass(scss)を使う場合の注意点

  • 2017.09.30
  • css
web制作にsass(scss)を使う場合の注意点

こんばんは、taisonです。
先日の記事で、sass(scss)(以下sassといいます。)
という言語について触れました。

今一度sass(scss)を正しく勉強する!脱初心者への道 第1弾!

今回は、
sassってそもそもどういう時に使うの?どんな使い方がいいの?
エラーが出た時の対処法について記事を書いていきたいとおもいます。

sassを使う際の注意点

自分も勉強がてら、使える案件になるべくsassを使うようにしているのですが、実際使用していくと、いくつか見えてくるものがありました。

そもそもsassを使うべき案件なのか考える

そもそも案件規模から考えて使う必要あるのか?って思う時がきます。
まぁ察しのいい人ならすぐ気付くと思うんですけど、、、。

例えば、共通cssが多くてそもそもコード量が多くならない場合。
簡単なコンポーネント(使い回し可能なクラス)設計だけしちゃえば間に合っちゃうので、特にsassを使う必要ありません。

まぁ無理やり使うこともできますが、不要なものをぶちこむ必要はないですしね。
あるとするならば、コンポーネント自体のcssコード量が多かったり、複雑化する場合でしょうか。

ボタンの色や形にバリエーションもたせたい場合なんかは最適。

sassの適切な使い方を考える

じゃあ使おう!となった時も、使い方を考えるのは重要です。
いくら便利ツールでも、使い方を間違えたら逆効果になりますからね。

主に気をつけるポイントは、

階層(ネスト)が出来る時にネストの仕方に気をつける
まぁそんなに無いと思いますが、ネストにネストを重ねると、親の名前がついた子供や孫がバンバン生まれていきます。
いわゆる子沢山のcss。コード量多し。
やりすぎに注意しましょう、、、
やたらめったら@extendしない
先日の記事でも書きましたが、特別グループ化したい要素でもない限り、@mixinを使うようにしましょう。
同じスタイルを当てる例を作ってみると、extendの方はクラスごと生成されるため、一見すると記述が短くなるのですが、ファイルサイズはincludeした時より大きくなる傾向があります。
エラーが起きた時は慌てず記法を見直してみる
sassを書く → コンパイルツールでcss出力〜 → あれ?エラー?
ってことがありますが、まぁほぼ100%記述ミスです。(コンパイラツールの不具合ってのもある)
慌てずコードを見直してみましょう。

この辺はwordpressのphpと違い、安心感ありますよ。
急に白画面!とかないですし。
慌てず焦らずで問題ありません。
(慌てず焦らずはphpも一緒か)

しっかり使用シーンをイメージしてからsassを活用しましょう

ざっくりと説明しましたが、実際キモになる判断基準や注意点てこんなところですかね。

まとめると、

  • コードが複雑化しそうなcssならばsassを利用する
  • 利用する際は、出力した後のcssをイメージして、なるべく見やすくなる設計を考える
  • エラーが起きたら慌てず焦らずコードチェック

複数人がcssに関わったりする場合は、特に設計が重要視されるはずなので、あらかじめガイドライン設けておくのもいいかもしれませんね。
自分の制作会社規模ではしばらくないかなぁ〜、、、

それではまた!

cssカテゴリの最新記事