SassでコンパイルするとCSSファイルが上書きされます。せっかく作成したCSSファイルが意図せず書き換えられてしまうと悲しいので、VSCodeでSassファイルのコンパイルする前にバックアップを取っておきましょう！

作成したCSSファイルを複製してファイル名を変更しておくだけでOKです！

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

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

<link rel="stylesheet" src="./style.scss">
のようにHTML上で直接Sassを読み込むことはできないという点に注意してください！

じゃあどうやってコンパイルすればいいのかというと、正攻法でコマンドラインからコマンドを実行してもいいのですが、VS Codeの拡張機能を使うとより便利です。

Sassファイルを自動でコンパイルしてCSSファイルに変換してくれる拡張機能『Live Sass Compiler』を入れておきましょう↓

• Live Sass Compiler - Visual Studio Marketplace

Live Sass Compilerのインストール

VS Code左パネルの「拡張機能」からキーワード「Live Sass Compiler」で検索 → 「インストール」ボタンからインストールできます。

インストールがうまくいくと、sassファイルを開いたときに、右下に「Watch Sass」と表示されるようになります。

この状態になればインストール成功です！

「インストールしたのにWatch Sassが表示されない！」という方は、scssファイルを開いてない可能性が高いので、適当な名前のscssファイルを作って開いてみてください👍

Live Sass Compilerの設定

おすすめの設定項目は4つあります。

• Sassの出力方法の設定
• Autoprefixerによるベンダープレフィックスの設定
• 除外するファイル群の設定
• ソースマップの無効化

拡張機能の「Live Sass Compiler」の歯車アイコンから「拡張機能の設定」を選択します。

「Live Sass Compile › Settings: Autoprefix」の項目の「settings.jsonで編集」を選択。

Sassの出力方法などの4つの設定を先に紹介すると、以下の通りです。既に設定が記載されている場合は、{}の部分はコピーせずにお使いください。

コピー{
  "liveSassCompile.settings.formats": [  // Sassの出力方法の設定
    {
      "format": "expanded",  // expanded / compressed の2つから選択可
      "extensionName": ".css",  // .css拡張子で出力
      "savePath": "~/../css"  // すべての.scssファイルからの相対的な出力先のフォルダを指定
    }
  ],
  "liveSassCompile.settings.autoprefix": [ // ベンダープレフィックスを付与する条件
    "last 2 versions",
  ],
  "liveSassCompile.settings.generateMap": false // ソースマップの出力有無
}

ソースに書いたコメントの通りですが、一つ一つの設定を細かく見ていきましょう！

Sassの出力方法の設定

まずは設定の内容をSassの出力方法の設定です。

Sassの出力方法として、主には以下の3つを設定していきます。

• 出力形式
• 拡張子
• 出力先フォルダ

出力形式は、「expanded」「compressed」の2つがあります。「expanded」は一般的な形に整えて出力してくれて、「compressed」は圧縮して出力してくれます。今回は出力後のCSSで書いている内容が把握しやすい「expanded」で進めていきます。

CSSへの出力時の拡張子も実は自由に変更可能です。.css以外の候補としては、圧縮していることを示す.min.cssがありますが、今回は圧縮しないので.cssの拡張子にします。

出力先フォルダは、保存時に変換された.cssファイルがどこに格納されるかを示すもので、一般的には「ルートを起点とする ”/css” ("savePath": "/css”)」 もしくは 「すべての.scssファイルを起点とする “../css” ("savePath": "~/../css”)」で管理します。今回はより柔軟に対応できる「"savePath": "~/../css”」で進めていきます。

このフォルダを指定することで、.scssファイルを格納するフォルダと.cssファイルを格納するフォルダを分けることができて、より管理しやすいフォルダ構成にすることができます。

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

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

例えば以下のような指定が可能です。

• 各ブラウザの2世代前までのバージョンを担保する「"last 2 versions"」

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

さらに細かく設定したい方はbrowserslistを参考にしてください↓
https://github.com/browserslist/browserslist

ソースマップの無効化

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

有効化していると、/css/フォルダに納品物とは関係のないファイルが出力されて最初のうちは混乱すると思うので、今回は無効化しておきます。

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

まずはSassに慣れてほしいので、シンプルに以下のようなディレクトリ構成でコーディングしてみましょう。

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

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

作成されたCSSファイルをHTMLから読み込んでください。

また、明日以降は実践的なコーディング課題が続きますが、その時も↑と同じようなフォルダ構成を作って進めてください。

これからCSSを書くときは必ずSassで書くようにしてくださいね！

右下に「Watch Sass」があると思いますが、ここをクリックすると「Watching...」という状態に変化します。「Watching...」という状態になると、Sassファイルの保存をLive Sass Compilerが監視するようになり、変更があればCSSファイルを自動で出力してくれるようになります。

試しに以下のような構成でSassを保存してみます。ベンダープレフィックスが付与されるかも確認したいので、Autoprefixerの参考コードを貼って確認ましょう。

sass/style.scssに以下のように記載して保存すると、、、

css/style.cssができたことが分かると思います。ベンダープレフィックスも追加されていますね！

このように、Sassをコンパイルしたいときは、「Watching...」の状態になっていることを確認した上で.scssファイルを保存するようにしましょう。

エラーメッセージの確認方法

「出力」のパネルにSassのコンパイルに失敗した際のエラーメッセージも表示されるので、思ったようにCSSが反映されない場合は、「出力」にエラーメッセージが表示されていないか確認するようにしましょう！

Sassには、アンダーバー ”_”から始まるファイル名を無視する特性があり、この特性を使うことでSassファイルを役割に応じて分割して管理することができたりします！

例えば、以下のようなファイル構成で作ると、_button.scssと_heading.scssはCSSとして出力されませんが、これらの内容をstyle.scssで読み込むことで、style.cssとしてひとまとまりで出力させることが可能です。

• /sass/_button.scss
• /sass/_heading.scss
• /sass/style.scss

style.scssで読み込む際は、「@use」を使ってアンダーバー ”_”と「.scss」を除いたファイル名を指定すればOKです。こうすることで、役割によってファイルを分けて管理することも可能になります。

コピー
/* style.scss内に記載 */
@use "button";
@use "heading";

ファイル分割は保守性の高いコーディングをする上で重要な考え方です。今すぐ身につける必要はありませんが、コーディングやSassの扱いに慣れてきたら、ぜひチャレンジしてみてください。

Sassでのファイル分割や保守性の高いCSSの書き方について、より深く学びたい方は以下の書籍を参考にしてみてください！

Sassのファイル分割の補足

Sassのファイル分割は2023年3月現在、@importで読み込む方法と@useで読み込む方法の2種類の方法が混在している状態です。@importは今主流で使われている方法ですが、今後使えなくなり、@useが今後の主流となります。

Sass公式によると、「@importは（使えるけど）非推奨。今後は使えなくする予定。」といった感じのアナウンスをしています。

ですので、これからSassを触る方は、@useを利用されることをおすすめします！

Sassの仕組みの移行期間となりますので、ファイル分割に関する情報には書籍、インターネット問わず、@importと@useの情報が混在している状況です。勉強するにあたっては、@importか@useか、どちらを前提として説明しているかを確認するようにしましょう。

@useで変数やmixinを呼び出す方法

@useで変数やmixinを呼び出す際に少し癖があるので見ておきましょう。

例えば、以下のような_variable.scssという変数やmixinを定義したファイルがあるとします。

コピー
// 変数の定義
$main-color: #da1e32;

// mixinの定義
@mixin button() {
  display: inline-block;
  padding: 8px 12px;
}

この_variable.scssファイルを@useで呼び出して、それぞれの変数とmixinを使う場合は以下のように書きます。変数名やmixin名の先頭に読み込むファイル名を明示することが重要なポイントです。

コピー
@use "variable";

.button {
  @include variable.button(); // 先頭に@useで呼び出したファイル名（variable）を記載して使う
  background-color: variable.$main-color; // 先頭に@useで呼び出したファイル名（variable）を記載して使う
}

このように少し記述が増えてしまうのですが、@useで変数やmixinを呼び出すときのルールとして覚えておきましょう！

JavaScriptもjQueryもSassも、プログラミングの要素が入ってくるので少し戸惑うこともあったかと思います。

ですが、変数や関数を使いながら効率的にコードを書いていくこの作業こそ、プログラミングの醍醐味です。

最後は気合いと根性で書くしかないHTML/CSSと違った楽しさを感じられると思います。

これを楽しいと思える方は、コーディングに留まらず、サーバーサイドの勉強を始めるのもいいかもしれません( ^ω^ )