Live Sass Compilerを使ったSassの環境構築

Dart Sassのファイルをコンパイルする方法の1つである、VSCodeの拡張機能のLive Sass Compilerを使った方法を紹介します。

Dart Sassとは

Dart Sassは、Dart製のSassです。

1. Ruby Sass
2. LibSass
3. Dart Sass

Sassは上の順で発展してきました。現在、Ruby Sassはサポート終了、LibSassは非推奨となり、Dart Sassが推奨されています。

Dart Sassでは、新モジュールシステムの導入など、これまでSassが抱えていた問題に取り組み、多くの面で最適化された形になります。

大きな変更点としては、これまで分割したファイルを読み込む際に利用していた@importが廃止となり、新たに導入されたモジュールシステムの@use, @forwardが採用されています。(この記事では具体的なSassの文法には触れず、コンパイル方法について紹介します)

Live Sass Compilerの設定

• 公式サイト：Live Sass Compiler - Visual Studio Marketplace

Step1

Live Sass Compilerと検索して、拡張機能をインストール。2つありますが、Glenn Marksさんの方を入れます。

Step2

設定をクリック。

Step3

setting.jsonで編集をクリック。

ユーザーとワークスペースは、下記のような違いがあります。

• ユーザーに設定したもの：すべてのプロジェクトで適応される
• ワークスペースに設定したもの：そのプロジェクトでのみ適応される / ユーザーで設定したものは上書きされる

一旦、ユーザーの方の設定を変更すれば良いです。

Step4

setting.jsonに下記を貼り付けて保存。

{
  // Live Sass Compilerの設定を指定
  "liveSassCompile.settings.formats": [
    {
      // CSSの出力形式を指定（ここでは「expanded」で展開された形式）
      "format": "expanded",
      // 出力されるファイルの拡張子を指定
      "extensionName": ".css",
      // コンパイルされたCSSファイルの保存先を指定
      "savePath": "/css"
    }
  ]
}

今回は、最低限の設定をしています。詳しい設定内容は、こちらに記載があります。

Step5

scssで作られたサイト(※)を開き、VSCode下部のWatch Sassをクリックします。※ 模写修行の教材には、scssで書いたコードが入っているので、ぜひお使いください。

そして、scss > style.scssを開き、ファイルを保存すればコンパイルされます。cssフォルダとその中にstyle.cssとstyle.css.mapが生成されれば正常に動いています。

おすすめの追加設定

Live Sass Compilerを入れると、コンパイルされるたびに、デフォルトでは下記のようなOutput Windowが表示されます。

Output Windowが常に表示されていると邪魔なので、setting.jsonを下記のようにしておくと良いです。

{
    // Live Sass Compilerの設定を指定
    "liveSassCompile.settings.formats": [
        {
            // CSSの出力形式を指定（ここでは「expanded」で展開された形式）
            "format": "expanded",
            // 出力されるファイルの拡張子を指定
            "extensionName": ".css",
            // コンパイルされたCSSファイルの保存先を指定
            "savePath": "/css"
        }
    ],
    "liveSassCompile.settings.showOutputWindowOn": "Warning"
}

"liveSassCompile.settings.showOutputWindowOn": "Warning"を入れておくことで、警告が出ない限り、Output Windowが出ないようになります。

カラクリ無しの完全無料！あなた専属のメンターが付く？