DAY28.Sass学習編 Sassで書き直し

初級で作ったデイトラ簡易版サイトのCSSを、Sassを使って書き直し

必ず使うもの
・入れ子
・変数
・＆記号
・@mixin

01.Sassをローカル環境で使えるようにする①

Sassはそのままだとブラウザで読み込めない

Sassで書いた内容をCSSに変換する『コンパイル』という処理が必要

Webページの装飾をするのはあくまでCSS
コンパイルによってSassファイルをCSSファイルに変換
変換したCSSファイルを読み込み

HTML上で直接Sassを読み込むことはできない

1.VS Codeの拡張機能を使う

Sassファイルを自動でコンパイルしてCSSファイルに変換する拡張機能
『DartJS Sass Compiler and Sass Watcher』

①DartJS Sass Compiler and Sass Watcherのインストール
②DartJS Sass Compiler and Sass Watcherの設定

おすすめの設定項目
①ベンダープレフィックスの設定
②ソースマップの無効化
③出力されるファイルの種類の設定
④CSSファイルの出力先の設定

① Autoprefixerによるベンダープレフィックスの設定
Autoprefixerは、ブラウザの条件を指定することで
該当のブラウザで機能するようにCSSプロパティに対して
適切に付与してくれる機能
・各ブラウザの2世代前までのバージョンを担保する「last 2 versions」
・IE11を担保する「ie >= 11」

② ソースマップの無効化
標準だとソースマップ（.css.mapという拡張子）が出力
デベロッパーツールなどから、CSSファイルの位置ではなく
Sassファイルの位置で示してくれる
開発者にとって便利なファイルではある
実際の納品時には削除するファイル

③ 出力されるファイルの種類の設定
Sassファイルをコンパイルすると、2つのファイルが出力
「.css」：通常のファイル
「.min.css」：圧縮されたファイル
たくさんのファイルがあると混乱の元なので、
「.css」だけが出力されるような設定する

④ CSSファイルの出力先の設定
標準だとsassファイルと同じフォルダ内でcssファイルが出力される
実際の案件では、sassフォルダとcssフォルダは
別のフォルダで管理することが多い
sassファイルがcssフォルダに出力されるように設定

02.Sassをローカル環境で使えるようにする②

Sassに慣れる為、シンプルなディレクトリ構成でコーディング

practice
┣ index.html
┣ css
┃ ┗ xxx.css（自動生成されるcssファイル）
┣ sass
┃ ┗ xxx.scss（記述していくscssファイル）
┣ js
┗ img

この構成でscssファイルを保存すると、
自動でコンパイルされたcssファイルが「css」フォルダ内に作成される

03.Sassをローカル環境で使えるようにしよう③

DartJS Sass Compiler and Sass Watcherは、
「style.scss」などのSassファイルを保存すると
自動でコンパイルされてCSSファイルが出力される設定

エラーメッセージは、右下にポップで出てくる

コンパイルが意図通りにいかなければポップのエラーメッセージを参照する

Sassファイルがコンパイルされるタイミング
style.scssが保存されたタイミング
アンバー付きのファイルはコンパイルの発動条件には含まれていない

04.Sassをローカル環境で使えるようにしよう④

Sassには、アンダーバー ”_”から始まるファイル名を無視する特性

この特性を使うことでSassファイルを役割に応じて
分割して管理することができる

読み込む際は、「@use」を使って
アンダーバー ”_”と「.scss」を除いたファイル名を指定すればOK

ファイル分割は保守性の高いコーディングをする上で重要な考え方

@importで読み込む方法と
@useで読み込む方法の2種類の方法が混在している状態

@useが今後の主流

@useで変数やmixinを呼び出す方法
変数名やmixin名の先頭に読み込むファイル名を明示することがポイント