プログラミングで人生を豊かに楽しく

VSCodeにSass(SCSS)のコンパイル環境を構築する方法

みやしも プログラミング

今回は、テキストエディターの『Visual Studio Code』にSass(SCSS)のコンパイル環境を構築する方法について解説してゆきます。



▼この記事を書いた人

Twitter|miyashimo_eng

フリーランスのみやしもです。WEB制作・システム開発などの経験を活かして、初心者に役立つIT知識を発信してゆきます。

VSCodeにSass(SCSS)のコンパイル環境を構築する方法

Visual Studio Code

人気のテキストエディター『Visual Studio Code(ビジュアル・スタジオ・コード)』における、Sass(SCSS)のコンパイル環境の構築方法を解説してゆきます。



また今回は、VSCodeのプラグインである『Live Sass Compiler』を使用してSassのコンパイル環境を構築してゆきます。とても簡単な手順で出来ますので、プログラミング・WEBデザイン初心者の方にもおススメな方法です。

Live Sass Compiler
Visual Studio Codeプラグイン『Live Sass Compiler』

▼この記事が向いている方

  • VSCodeを使用している方
  • Sass(SCSS)のコンパイル環境の導入がしたい方
  • プログラミング・WEBデザイン初心者の方
プラグインの導入からSCSSのコンパイルを完了させるまで、約30分ほどで完了出来る内容です。
2021年最新のバージョンにしたがって手順を整理しました。これからSassを利用される方は必見の内容です!

Sassのコンパイル環境を導入する

Sassのコンパイル環境を導入する

それでは早速、Sass(SCSS)のコンパイル環境を整えるための手順から解説してゆきます。今回はとても簡単で、以下の2つのツールを導入するだけで完了させることが出来ます。

エディタ:『VSCode(Visual Studio Code)』
プラグイン:『Live Sass Compiler』

導入①:VSCodeをインストールする

パソコンにVSCodeが入っていない方は、まずはVSCodeのインストールから行いましょう。VSCodeは公式サイトからインストーラーをダウンロードする事ができます。Winodws・Macの両方に対応しており、いずれも無料で入手できます。



▼公式サイトはこちら

Visual Studio Code

※クリックすると別ウィンドウで開きます



インストール方法や日本語化の手順について詳しく知りたい方は、次の記事を参考に導入を進めてみてください。

導入②:Live Sass Compilerをインストールする

続けてSassのコンパイラとなるプラグイン『Live Sass Compiler』をインストールします。プラグインをインストールするには、VSCodeでつぎの順番で作業を行います。



▼プラグインのインストール手順

  1. VSCodeの拡張機能のメニューを開く
  2. プラグイン『Live Sass Compiler』を検索する
  3. プラグインのインストールを実行する
Live Sass Compilerのインストール方法
Live Sass Compilerのインストール方法

以上でSassのコンパイル環境を導入する方法の解説は終わりです。

続けてプラグインの使い方について、実際の作業を例に解説してゆきます!

プラグイン『Live Sass Compiler』の使い方

プラグイン『Live Sass Compiler』の使い方

VSCodeに『Live Sass Compiler』をインストールしたら、さっそく使ってみましょう。今回は実際のSCSSのコーディング作業を例に、プラグインの使い方について紹介してゆきます。

使い方①:コンパイルの監視を開始する

まずはVSCode上でSCSSのコンパイルが行われる様にするために『コンパイルの監視』をスタートさせます。



プラグインをインストールするとVSCodeの画面下部に『Watch Sass』という項目が追加されると思いますが、この項目クリックするとSCSSファイルのコンパイルの監視が始まります。

Live Sass CompilerのSassの監視ボタン
Live Sass Compilerの監視ボタン

クリックすると項目の状態が『Watching..』といった様に変わりますが、以降はこの状態でSCSSファイルを作成したり、ファイルの内容を変更すると、都度SCSSのコンパイルが実行される様になります。



コンパイル監視の状態は、再度『Watching..』を押すか、VSCodeのウィンドウを閉じれば解除されます。また、この状態はVSCodeのウィンドウごとに管理されていますので、複数のウィンドウを使って作業を行っている場合はそれぞれのウィンドウで操作してゆく必要があります。



このほかコンパイルの制御はVSCodeのコマンドパレットから制御できる様にもなっています。

監視の開始:Live Sass: Watch Sass
監視の終了:Live Sass: Stop Watching
※コマンドパレットはF1キーで開く事ができます
基本的には開いたウィンドウのコンパイル監視が常に有効になった状態でコードを編集してゆけばOKです。

使い方②:SCSSのコーディングを行う

コンパイルの監視について解説してゆきましたが、この上ではどの様にSCSSのコーディングが出来るのかについて、続けて解説してゆきます。今回は、試しに次のような内容のSCSSでファイルを作成して解説を行います。



▼SCSSファイルの内容

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}



まずはVSCodeで上記の内容を貼り付けたSCSSファイルを作成します。

Live Sass Compilerを使ったSCSSのコンパイル①
Live Sass Compilerを使ったSCSSのコンパイル①

この状態でVSCodeの画面下にある『Watch Sass』を押して、コンパイルの監視をスタートさせます。すると、既にあるSCSSファイルに対してコンパイルが行われ、画面はつぎの様な状態となります。

Live Sass Compilerを使ったSCSSのコンパイル②
Live Sass Compilerを使ったSCSSのコンパイル②

注目する場所は2カ所あり、ひとつめはVSCodeのエクスプローラー上にコンパイル結果として生成されたCSSファイルが出力されていること。ふたつめは、画面下部の『出力』パネルにSassのコンパイル結果が出力されていることです。



コンパイルされたCSSの内容も見てみます。

コンパイルされたCSSの内容
Live Sass Compilerを使ったSCSSのコンパイル③
いずれの状態からも分かる通り、Sassによるコンパイルが上手くいっている事がわかります。

一方でコンパイルが上手くゆかない場合は『出力』パネルにエラー内容が表示されます。



これらの情報は修正のヒントになりますので、Live Sass Compilerを使ったコーディング時には、この部分にも注意してゆくとスムーズに作業を進める事が出来ると思います。

監視中はファイルを追加したり変更する度にコンパイルが行われる。コンパイル結果はVSCodeの画面下部にある『出力』パネルで確認できる。

以上でプラグイン『Live Sass Compiler』の使用方法の解説は終わりです。

プラグインの設定を変える方法

VSCodeの設定ファイル『setting.json』に設定を追記すれば、プラグインの設定内容を変えることも出来ます。『Live Sass Compiler』では、次の設定内容をサポートしています。



▼Live Sass Compilerの設定内容

  • CSSのフォーマット・拡張子名・保存場所
  • コンパイル対象から除外するファイル
  • コンパイル対象に含めるファイル
  • コンパイル時にMapファイルを出力するか
  • ブラウザ基準によるベンダープレフィックスの追加 条件
  • 出力パネルを自動的に表示するかどうか



詳しくは公式のドキュメントも参考にしてみて下さい。



▼公式ドキュメント

Live Sass Compiler - Settings

この記事のまとめ

今回は、人気のテキストエディター『Visual Studio Code(ビジュアル・スタジオ・コード)』における、Sass(SCSS)環境の構築方法について解説してゆきました。



PC上にSassのコンパイル環境を作成するには、本来はコマンドラインによる操作や、コンパイル監視の調整を必要としますが、VSCodeに『Live Sass Compiler』を導入すれば非常に簡単に導入する事ができます。

今回は以上となります。最後までお読みいただき、ありがとうございました!

関連記事

最新記事