86.復習しよう③ ～Sassについて～
復習シリーズ第３弾。
本日はSassについて。
早速やっていきましょう。
Sassとは
SassはSyntactically Awesome Style Sheetsの略です。
JavaScriptとjQueryの関係に似てますね。
Sassを覚えてからというもの、
CSS ＝ Sassくらいの認識で書いていた気がします。
それくらい自然に使えますし、楽に書くことができます。
Sassの特徴
入れ子構造
CSSではセレクタの親子関係を示すのに、タグ名やクラス名を親が左に来るように区切りごとに半角スペースを入れて並べて書いていく必要がありました。
Sassでは直感的に親子関係は入れ子にすることで表現できます。
また、疑似要素を書く時も＆をつけて入れ子として書くことで適用されるのもわかりやすいですね。
a{
&:hover{
}
}
変数
Sassは$マークを頭につけることで、変数を定義することができます。
サイトごとにメインで使うカラーを変数に定義しておくことで、カラーを都度確認する手間を減らしたりと活用次第で大きく時間短縮につながるのが魅力です。
@mixin
これはかなり便利な仕組み、定義済みのスタイルを使い回すことができます。
メディアクエリや共通部分をmixinにすることで、かなり楽になります。
関数
これは他のプログラム言語と同じように、引数、返り値を使い処理を行います。
@use
別のSassファイルを読み込むことができます。
機能や目的ごとにファイルを分割して、メインのstyle.scssに読み込んで使う等
管理がしやすくなります。メイン以外のSassファイルには先頭に_（アンダーバー)を付与する必要がある点に注意が必要です。
また、最終的にSassはCSSに変換してブラウザが読み込むので、jQueryの懸念として上がっていたパフォーマンス問題はSassの場合には気にしなくて良さそうです。
Sassは本当に便利で、使わない理由が見当たらないくらいです。
環境さえ整えてしまえば、もうCSSをそのまま書くという状態には戻れませんね。
感謝です。
１点注意があって、Sassは入れ子構造で書きやすいがゆえに、入れ子にしすぎてしまうケースがあります。
この場合は可読性が下がってしまうので、２階層ぐらいまでの使用に留めるのが良さそうです。
今日のまとめ
- SassはCSSの拡張言語、CSSを楽に書けるようにした言語。
- Sassは書きやすい事はもちろんのこと、@mixinや@use等再利用や管理の側面でも使いやすくなっている。
- 入れ子構造は使いやすいが、深くなりすぎないように注意。
本日はSassについて復習してきました。
セレクタの指定がちょっと曖昧な箇所があったので、細かいところは別途復習したいと思います。
では、また。
