デイトラweb制作中級編 DAY8

デイトラ簡易版サイトの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を使うことに慣れていないので

怪しいところも多いですが、しっかり使えるようにしたいです!

コメントを残す

メールアドレスが公開されることはありません。