今回は、CSSの進化系「SCSS」について紹介させていただきます。
私はWEBデザイナー社会人向けスクールに通っていた時こちらのことは、全然知らなかったです。
入社してから、少しずつ覚えていきました。
現在では、使わない日がないくらいです。
感覚的にはCSS見ると掛け算を足し算でやっているような感じがします。
（今でもCSSで書かれたサイトは触るので、どちらも覚えておいた方が良いので、CSSを覚えたらSCSSを覚えるのがちょうどいいです。）
メリット
まずは、メリットについて。
- ネスティング (nesting) によってCSSより記述する量が減ります。
- 変数を使用できます。名前をつけた値を呼び出すことができます。（更新時に便利になります。）
- ミックスイン (mixins)によって、ボタンの設定などのコードの固まりを別の場所でそれを呼び出すことができるようになります。
デメリット
次にデメリットについて。
- SCSSを知らないと更新が難しい。
- 作業者の力量によって書き方が変わるので、ルール・周知が必要。
- コンパイル（変換）の方法がいくつかあるですが、慣れていないと変換に手間取る場合があります。
１はSCSSの勉強をすることでなんとかなります。２、についてはわからないものがある場合は、書いた人に確認。ルール化して周知することが大事です。３、は慣れれば早くなりますし、より早い方法を試していくのも良いと思います。
基本の書き方まとめ
ネスト
See the Pen SCSS（ネスト） by hiyohina (@hiyohina) on CodePen.
SCSS では、HTML 構造のように CSS をネストして（入れ子で）記述することができます。
記述がグッと減るため、書きやすく更新をしやすいです。
変数・ミックスイン (mixins)
See the Pen SCSS by hiyohina (@hiyohina) on CodePen.
おすすめの覚え方
これは、私が通った覚え方なのですが、ネスト→変数→ミックスイン (mixins)です。
まずは、ネストでCSSからSCSSの書き方を覚えて、変数を使い始めて、ミキシンを使用するようにしました。少しずつ覚えていくのが無理なく覚えるコツだと思います。
SCSSを覚えるのにおすすめの本
参考サイト
Sass: Syntactically Awesome Style Sheets
Syntactically Awesome Style Sheets
sass-lang.com
SASS (scss) の基本的な使い方
Dart SASS (scss) の基本的な使い方に関する参考資料・解説等。@use や @forward、モジュールシステム、コメント・文字コード, プロパティのネスト, @media のネスト, 親セレクタの参照 (&), 変数（Variables: $）,変数の有効範囲（スコープ）, !defaut フラグ（デフ...
www.webdesignleaves.com
コメント