【初級編DAY22】カフェLPのCSSをSassで書き直してみよう

Sassについて学んだところで、実際にコードを書いていくための準備をしましょう。

SassからCSSへコンパイルする

■コンパイルとは■

Sassそのままだとブラウザで読み込めない。Sassで書いた内容をCSSに変換する『コンパイル』という処理が必要となる。

※Webページの装飾はあくまでcssなので、「Sassファイル→cssファイルに変換→HTMLに読み込む」という作業をするよ！

Live Sass Compilerのインストール

Live Sass Compilerをインストールしましょう。Sassからsccへリアルタイムに変換、ファイルを自動作成してくれる便利な拡張機能です。

下記では、使うにあたって必要な設定をしていきます。

設定画面記述文

   　// Sassの出力方法の設定

　　　"liveSassCompile.settings.formats": [

      {

　　　　// expanded / compressed の2つから選択可

        "format": "expanded",

　　　　// .css拡張子で出力

        "extensionName": ".css",

　　　　// すべての.scssファイルからの相対的な出力先のフォルダを指定

        "savePath": "~/../css"

      }

    ],

Sassの出力方法の設定

// expanded / compressed の2つから選択可      

"format": "expanded",

出力形式・・・「expanded」「compressed」

expanded　：一般的な形に整えて出力。
compressed：圧縮して出力。

今回は出力後のCSSで書いている内容が把握しやすい「expanded」で進めていきます。

拡張子

      // .css拡張子で出力

      "extensionName": ".css",

.css以外の候補としては、圧縮していることを示す.min.cssがある。

今回は圧縮しないので.cssの拡張子で進めていきます。

出力先フォルダ

      // すべての.scssファイルからの相対的な出力先のフォルダを指定

      "savePath": "~/../css"  

保存時に自動的に変換・作成されたファイルがどこに格納されるかを示すための設定。

・ルートを起点とする・・・ ”/css” 
・すべての.scssファイルを起点とする ・・・“../css” 

どちらかとなる。

今回はより柔軟に対応できる「"savePath": "~/../css”」で進める。

メリット
・.scssファイルを格納するフォルダと.cssファイルを格納するフォルダを分けることがでる

・より管理しやすいフォルダ構成にすることができる

Autoprefixerによるベンダープレフィックスの設定

 "liveSassCompile.settings.autoprefix": [ // ベンダープレフィックスを付与する条件

      "last 2 versions",

    ],

 

■Autoprefixerとは■

ブラウザの条件を指定することで該当のブラウザで機能するようにCSSプロパティに対して適切に付与してくれる機能のこと。

ここの設定は案件で担保が必要なブラウザの種類やバージョンに応じて柔軟に変更していくのが良い。

👇参考👇

GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env

除外するファイルの設定

コンパイルを設定するにあたり、除外するファイルを選択できます。

今回は記載しません。※調べてみよう！

ソースマップの無効化

// ソースマップの出力有無

"liveSassCompile.settings.generateMap": false

標準だとソースマップ（.css.mapという拡張子）が自動的に作成される。
これはデベロッパーツールなどから、CSSファイルの位置ではなくSassファイルの位置で示してくれるものとなる。

有効化していると、/css/フォルダに納品物とは関係のないファイルが出力されてしまう。

最初のうちは混乱すると思うので、今回は無効化しておきます。

Sassに慣れてきたらソースマップの役割についてもぜひ調べてみてみよう！

---

フォルダの構成

フォルダを作成するにあたり、下記のような構成となるよう今後心掛けていきましょう！

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

---

ファイル分割の方法（@useの使い方）

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

例
/sass/_button.scss・・・cssで出力されない
/sass/_heading.scss・・cssで出力されない
/sass/style.scss・・・_button.scssと_heading.scssを読み込むことでひとまとまりでcssに出力させることが出来る。

では@useを使って、button.scssとgeading.scssをstyle.scssに読み込んでいきましょう。

基本記述

@use "ファイル名";

※ファイル名はアンダーバー ”_”と「.scss」を除く。

/* style.scss内に記載 */

@use "button";

@use "heading";

こうすることで、役割によってファイルを分けて管理できるね！

@importについて

@importを色んなサイトで見かけることがあるかと思いますが、こちらは（使えるけど）非推奨。今後は使えなくする予定との公式から発表されています。

---

別ファイル内のmixin、変数を使う場合

先ほどの項目で@useで別ファイルが読み込めるのがわかりました。

その中で別ファイルで定義したmixinや変数をまとめ先のファイルで使うにはそのまま変数名、@includeでは使えないので、以下を覚えておきましょう。

分割ファイルで設定したmixinを呼び出す

@include 分割ファイル名.mixin名

分割ファイルで設定した変数を呼び出す

プロパティ名：　分割ファイル名.$変数名；

例

@use "header";

.button {

　// mixinの呼び出し。先頭に@useで呼び出したファイル名（header）を記載

  @include header.button();

// 変数の呼び出し。先頭に@useで呼び出したファイル名（header）を記載して使う

  background-color: header.$main-color;

}

---

以上で　Sassを読み込み、使用する準備が整いました！

実際にSassを使用してCSSを簡素化させてみましょう♫

では、今日はここまで٩( ''ω'' )وお疲れ様でした。