Sass（SCSS記法）でよく使う書き方まとめ
更新日：2022年2月4日
CSSをより使いやすく、より変更に強くする為のSassが最近流行ってきており、今後Webにおけるスタンダードになっていきそうです。
SassにはSASS記法とSCSS記法の2種類がありますが、SCSS記法についてのまとめです。
尚、Sassの導入については既にしているものとします。
&が使える
例えばHTMLは下記のように書きます。
2 | <p class="header__title">ヘッダーのタイトル</p> |
3 | <p class="header__text">ヘッダーのテキスト</p> |
そして、SCSSでは下記のように書きます。
通常のCSSでは
.header__title
と書く場合を
&__titleと略して書くことが出来ます。
下記のように疑似要素である:hoverにも同様の使い方が出来ます。
変数が使える
例えば下記のようにあらかじめ変数を宣言しておくと、変数名でCSSを呼び出すことが出来ます。
これって何が便利なの？って最初は思うのですが、サイトには必ずメインカラーがありますよね。
メインカラーを変数で宣言しておくことでメインカラーを変更したい場合にその変数のカラーコードを変更するだけで一括で反映されます。
メディアクエリの書き出しが容易
例えば下記のようにあらかじめブレイクポイントを480pxで宣言しておくと、メディアクエリを容易に呼び出すことが出来ます。
03 | @media only screen and (max-width: $media480) { |
おわかり頂けたでしょうか。
@include media480 {}
の中にCSSを書くだけで480px以下のデバイスに適用されます。
最初は使いにくく感じるのですが、慣れると普通のCSSが面倒臭く感じてきたりします。
ご活用下さい！
