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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

特に上記のような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

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が出ないようになります。

基礎学習後...迷子になっていませんか？