デイトラweb制作中級編 DAY8
nakano
デイトラ簡易版サイトのCSSをSassで書き直す
デイトラweb制作初級編 DAY7 で作成したサイトのCSSをSassにする
書き直す準備
①DartJS Sass Compiler and Sass Watcherの導入
コンパイル（CSSに変換する）することで、Sassがブラウザで読み込める
コンパイルする方法
・コマンドラインからコマンドを実行する
・VS Codeの拡張機能を使う ← 今回はこっち
インストール後の設定
・Autoprefixerによるベンダープレフィックスの設定
→ 指定したブラウザで機能するようにCSSプロパティに対して適切に付与してくれる
・ソースマップの無効化
→ 「.css.map」の拡張子を作らない
・出力されるファイルの種類の設定
→ 「.css」「.min.css」ファイルの内、「.css」ファイルのみ出力する
・CSSファイルの出力先の設定
→ sassファイルをcssフォルダに出力する
・自動保存の設定
→ 「Disable Compile On Save」のチェックを外す
② Sass利用時のフォルダ構成
書き直すまでの手順
1. 「sassフォルダ」で「scssファイル」を保存する
2. 「cssフォルダ」内に「cssファイル」が作成される
3. 作成された「cssファイル」をhtmlから読み込む
③ベンダープレフィックスとは
ベンダープレフィックス が付与されることの確認
Day8では例として「linear-gradient」を使った
ベンダープレフィックス ・・・ 様々なブラウザで対応できるようにする接頭辞
例：「–webkit-」、「–moz-」など
④Sassファイルの分割
Sassには、アンダーバー 「 _ 」から始まるファイル名を無視する特性がある
→ Sassファイルを役割に応じて、分割して管理することができる
ファイル分割の方法
・@import → 使えなくなる
・@use → 今後の主流になる
ファイルの構成
引用元：cssの拡張言語scssが面白くて便利だった(中級編)
例：@useで ⑴「変数」と ⑵「mixin」を呼び出す
→ 「_variable.scss」ファイル、「style.scss」ファイルを使用した場合
・「_variable.scss」ファイルでやること
// ⑴ 変数の定義
$main-color: #da1e32;
// ⑵ mixinの定義
@mixin button() {
display: inline-block;
padding: 8px 12px;
}・「style.scss」ファイルでやること
@use "variable";
// 先頭に@useで呼び出したファイル名（variable）を記載して使う
.button {
background-color: variable.$main-color; // ⑴ 変数の呼び出し
@include variable.button(); // ⑵ mixinの呼び出し
}まとめ
今回はデイトラ簡易版サイトのCSSをSassで書き直しました。
書き直す前にプラグインをインストールしたり、
設定をいじったりと少し準備に時間がかかりましたが
だいぶすっきりした気がします。
まだSassを使うことに慣れていないので
怪しいところも多いですが、しっかり使えるようにしたいです！
