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

それではまた!

こちらの記事も読まれています

WordPressでcssを追加・修正したけど反映しない!cssが効かない時に確認するコト... こんばんわtaisonです。 最近ウチのウサギが1歳の誕生日を迎えまして、 嫁がお祝いということでリンゴとにんじんで作ったケーキを目の前に置いたんですが、、、 全く食べず 笑 食べてる写真を収めたくて奮闘してたんですけど、目の前に置いても口元に置いてもウンともスンとも言わず、、、...
css font-kerningを使ってwebで欧文の文字詰めをする... こんばんわ。taisonです。 皆さん、見出しやキャッチコピーで大きな文字を扱うことってありますよね。 シンプルなデザインにどかーん!と欧文文字が入ってたりすると、それだけでブランドイメージを伝えるのも難しくありません。 (まあ欧文使ったwebサイト作ることって、実際は少ないですけど) ...
mix-blend-mode exclusionを使っておしゃれなデザインを実現してみる... こんばんは!taisonです。 ここのところ構成考える仕事が多く、あまりcssに手をつけていませんでした 汗 気を取り直して更新していきたいと思います! さて、今回はおしゃれなサイト制作にはうってつけな、あるcssをご紹介したいと思います。 photoshopやillustratorでお...
今一度sass(scss)を正しく勉強する!脱初心者への道 第1弾!... こんばんは。9月病(あるのか知らんけど)に陥り、頭がフワフワしているtaisonです。 もぉ秋ですねぇ、、、 さて、Twitterで人知れず宣言していたのですが、 10月はcss強化月間! という事で、本日第1弾の開幕でございます。 css強化月間第1弾sassを活用するコーディングを担当す...

cssカテゴリの最新記事