Visual Studio Code (VSC)とSASSの環境とコンパイル

SASSを使うなら、エディターは Visual Stidio Code (VSC)が超簡単！無料ですし、初心者でも怖がらずにインストールできるのでお勧めです！Atomよりも軽い様にも思いますので、メモリが厳しいPCをお使いの方にも最適です。SASSからCSSへの出力（コンパイル）の方法もシェアします。

SASSは、コンパイルしないと使えません。

VS Code(Visual Stidio Code)をインストールする

無料でダウンロードできます。ダウンロードは3タイプあり、誰でもOKなUser Installer、管理者権限が必要なSystem Installerと、zip形式になっていて、exeファイルを起動すれば使えるタイプがあります。zipは、ちょっとだけ使用した人や、インストールしたくない方向けなのでしょうか？

Visual Stidio Code

基本的には「次へ」で突き進めばOKです。

お好みでショートカットを作成

SASSのコンパイル 1（DartJS Sass Compiler and Sass Watcher）

DartJS Sass Compiler and Sass Watcher は、SASSのコンパイルと同時にMinify（圧縮）も同時に行ってくれるので便利です。次にご紹介するLive Sass Compilerよりもオススメです。

拡張機能ボタンを押し、「DartJS Sass Compiler and Sass Watcher」を検索し、インストールと有効化するだけ。

SCSSファイルを保存すると、自動的にCSSファイルとminify(圧縮）したmin.cssが出力されます。

あわせて読みたい

Minify(ミニファイ）圧縮して軽量化とサイトの高速化する方法 ファイルを圧縮し、軽量化する事でサイトの表示速度が上がり、SEO的にも有利です。閲覧する方にとってもスピーディーな表示は良い事ですよね。デメリットが見当たらない…

SASSのコンパイル 2（Live Sass Compiler）

minify(圧縮）しなくても良いのであればこちらでもOKですが、先のDartJS Sass Compiler and Sass Watcherの方がオススメです。

起動したら、左のメニューのExtentionをクリックし、「Live Sass Compiler」を検索し、インストールします。

コンパイルする

sassファイルにコードを書き終えたら、cssファイルに書き出し(コンバイル）します。

windowの下にある[Watch Sass]をクリックすれば、保存の度に自動でコンパイルされます。

おまけの機能 ブラウザーで確認する

Live Sass Compilerをインストールした事で、[Live Server]というextentionがインストールされます。

[Go live]をクリックすると、ブラウザーが起動します。これば、htmlしか使えません。Visual Studio Code でBrowser Syncが便利です。

WordPressもOK

Visual Studio Code 初心者も！楽々！ブラウザの自動更新 初心者にも簡単なので、ぜひ試して欲しい！Visual Studio Code でBrowser Syncを使う方法。Web制作で活躍する便利な機能、ブラウザの更新の自動化と、スマホ等のデバイ…