Sass 導入方法(Koalaでコンパイル)

Sass はそのままでは使用できないため、CSS に変換（コンパイル）します。
コンパイルの手段は色々あるのですが、今回は Koala というソフトウェアで行います。

ダウンロードとインストール

公式サイトからソフトをダウンロードし、インストールします。

起動後はタスクバーではなく、右下の「隠れているインジケーター」内にある場合もあります。
タスクバーから起動しなくなった場合も、インジケーターを確認してみましょう。

最初は英語なので、日本語化しましょう。

STEP

左上の歯車アイコンをクリック（環境設定）

STEP

一般 → 言語を日本語に設定

会社などで、プロジェクトのテンプレートがある場合、プロジェクトファイル内にkoala-config.jsonが無いか確認してください。

koala-config.json ファイルは、koala の設定ファイルなので、ある場合は以下のフォルダ構造の構築や初期設定などがすでに終わっていますので、それに従ってください。

Sass を使用したいプロジェクトを用意します。

今回この記事で準備するフォルダ構成は以下となります。※ []はフォルダ

[css] ─ [sass] ─ common.scss
      └ common.css
      └ reset.css
[img]
[js]
index.html
style.css

WordPress の構築を意識しています。
style.css には、common.css と reset.css をインポートしてあります。

@charset "utf-8";
@import url("css/reset.css");
@import url("css/common.css");

css/sass/common.scssが、Sassファイルになります。
コンパイルすると、css/common.cssのファイルが上書きされるように構築していきます。

左上の + アイコンを押して選択するか、フォルダをドラッグアンドドロップします。

プロジェクトファイルが登録されます。

初期設定をしていきます。
※プロジェクトファイル内に、koala-config.jsonがある場合は、その設定が優先されます。

STEP

左上の歯車アイコンをクリック（環境設定）

STEP

Sass の「Source Map」と「Autoprefix」にチェックを入れ、アウトプットスタイルを「expanded」に

「Source Map」は、検証画面で Sass が確認できるようにするものです。
コンパイル時に「ファイル名.css.map」というファイルが自動で出来上がります。
「Autoprefix」は、ベンダープレフィックスを自動的に付与したり削除してくれます。
アウトプットスタイル「expanded」は、Sass をコンパイルした後の、css の記述を「普通にCSSを書いた様に」します。

色々設定はいじれますが、とりあえずはコレで設定しておきます。