アサモンノデザイン

現役のデザイナーによるWebデザインに関する技術情報とカメラ・ガジェットに関する情報をお届けします

Social Navigation

【超簡単】Visual Studio CodeでSass(scss)のコンパイル環境を構築しよう。

フロントエンド

こんにちは、浅本(@asa_mo_n)です。

今回のVisual Studio Codeでターミナルやコマンドプロンプトを使用せずにSass(SCSS)のコンパイル環境を構築する方法をご紹介します。

Atomでの環境構築が上手くいかなかったという方もぜひお試しください。こちらの方法ですとWindowsでもmacOSでも簡単に環境構築をすることができます。

導入方法

Step1. Visual Studio Codeをインストール

ダウンロードはこちらから(→ https://code.visualstudio.com/

Step2. 拡張機能のLive Sass Compilerをインストールする

ダウンロードはこちらから(→https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

既にVisual Studio Codeがインストールされていれば、上記ページのインストールボタンをクリックするだけでVisual Studio Code内で拡張機能をインストールする画面が開きます。

Step3. アプリケーション下部に表示されているWatch Sassをクリックする

Watch SassがStop Watchingに切り替われば成功です。

Step4. 拡張子が .scssのファイルを作成し、保存する。

無事にコンパイルされ、.cssのファイルが書き出されると環境構築が完了です。

まとめ

いかがでしたか?

Visual Studio CodeにおけるSassのコンパイル環境の構築は非常に簡単です。

今までSassの便利さは知っていたけれどコンパイル環境の構築が上手くいかずに諦めていたという方はぜひお試しください。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください