こんにちは。
だいぶ更新の日が空いてしまいました。
コロナは落ち着いてきたとはいえまだ油断はできませんね^^;
さて、今日はまた「Sass」に関して書こうと思います！
復習すると、
SassとはCSSのメタ言語でCSSを効率よく記述できるように開発されたものです。
今までSassに関しては３記事書きましたがより詳しく勉強したのでシェアしますね。
断片的になってしまうのですが、ご了承ください(＞＜)
変数について
書き方
・数字に単位をつけても良い
ex) $font-size: 1.2rem;
・色コードには「”（クォーテーション）」をつけなくて良い
ex) $color: #f0f0f0;
・テキストは「”（クォーテーション）」または「””（ダブルクォーテーション）」で囲む
ex) $txt: “ふたっぱ “;
文字サイズや余白の計算ができる
自分で電卓など使って計算しなくても自動的に数値を計算してくれます！
ex) $font-size: (24px / 16px) + rem;
※この場合適用したい文字サイズが24pxで、親要素の文字サイズが16pxです。
URLなどの途中に変数を使いたい場合 〜#{}で囲む〜
例えば下記の変数を使いたいとします。
$file-path: ‘../assets/images/’;
従来のようにかくとこうなりますよね。
background-image: url($file-pathcmn_logo_tit01.svg);
しかし変数部分と画像の名前部分の区切りが分からずエラーになります。
この時は変数を ＃{} で囲う必要があります！
background-image: url(#{$file-path}cmn_logo_tit01.svg);
ファイルの先頭につける「_（アンダースコア）」の意味とは？
プロゲートやドットインストールで勉強した時大体のSassファイルには先頭にアンダースコアが付いていました。
ex) _setting.scss
これは何のために付けるかというと、コンパイルする際にCSSファイルを生成したくない時に付けます！
人にもよるとは思いますが、実務では変数だけを書いたSassファイルや、ヘッダーの中身だけ書いたSassファイルなどたくさんのファイルを作ります。
コンパイルすると基本同じ名前のCSSファイルが生成されますがSassファイルの数だけCSSファイルが生成されてしまうと容量が重くなります。
なのでimport機能を使って1つのSassファイルにまとめるのが良いみたいです＾＾
まとめると、「common.scss」のようなSassファイルを作って、その中にimportでその他のSassファイル（先頭に_付き）を書いていくと良いです。
まとめ
いかがでしたか？
Sassについてもう少し詳しく書きました！
使う時がきたらその時はちゃんと使えるようにしようと思います。
では今日はここまで〜〜
コメント