

- SassをCSSにコンパイル(変換する)簡単な方法を知りたい。
- Rubyとか他のツールを使うのが面倒。。。
- 何か他に簡単なコンパイルの方法はないかな?分かりやすく解説してほしい!
今回の記事では、SassのコードをCSSにコンパイル(変換する)するとっても簡単な方法をご紹介します!
一般的にはSassを使うには環境を構築する必要があり、Rubyをインストールしたり、他にツールを使用したりして、SassからCSSに変換します。
しかし、初心者の方は少し難易度が高く、もっと簡単にSassを使える方法が知りたいでしょう!
- Rubyや他のツールを用いることなく一瞬でSassの環境を作る
- この記事を2分読むだけですぐにSassが使えるようになる
この記事を読むとこのようなメリットが得られます!
結論から言うと、VSCodeに「Live Sass Compiler」と言う拡張機能をインストールするだけです!(※VSCodeを使っている人が対象)
→ 最強エディタVSCodeとは?特徴からインストール、使い方まで解説!
✔︎こんな方にオススメ
- Sassのコンパイル方法(CSSに変換)が分からない方
- 簡単にSassを使う環境を構築したい方
- VSCodeを使っている方
そもそもSassとは?基礎知識

Sass(サス)とは、一言で言うと、、、
「CSSをより効率的早くに書ける言語です!」
つまりSassとCSSは、同じ意図で使われ密接な関係があります。
SassはSyntactically Awesome StyleSheet を略した言葉で、
- Syntactically = 構文的に
- Awesome = 驚くべき
- StyleSheet = スタイルシート
と言う意味になり、具体的に言うと「変数や関数(構文的に)を使うことによって、驚くくらいに早くスタイルシートを作ることができる!」と言う解釈でいいでしょう!
つまりイメージ的には、CSSでは20分かかったスタイリングがSassを使うことにより5分でスタイリングできてしまうと言うことです!
VSCodeでSassのコンパイル環境を構築する方法

この方法を使えば、たったの3分程度でSassをコンパイルする環境が構築できます!
✔︎Sassの環境構築の手順
- VSCodeを開く
- Live Sass Compilerをインストール
- WatchSassをクリック
- Sassをコーディング
- 保存する
- CSSが生成される
やばい!超簡単!!
たったのこれだけで、Sassのコンパイルができてしまいます!
VSCodeを使ってない方はこちらのVSCodeホームページからインストールしましょう!
→ Visual Studio Code – Code Editing. Redefined

VSCodeは僕が超オススメする、機能性抜群のエディタです!
1. Live Sass Compilerをインストール
まず始めにVSCodeを開いて、 Live Sass Compilerの拡張機能をインストールします。

- サイドバーのExtensionsをクリック
- 検索バーにlive sass compilerと検索
- Installをクリック
この作業だけで、あなたのVSCodeにLive Sass Compilerがインストールされました!
2.WatchSassをクリック
インストールが完了したら、実際にmain.sass(main.scss)ファイルを作ってSassをCSSにコンパイルしてみましょう!

まず始めに、好きな名前の.sass(.scss)拡張のファイルを作ります。
先ほど、Live Sass Compilerをインストールしたので、下の青のバーに「Watch Sass」と項目が追加されているので、それをクリックします。
Watch Sassのボタンをクリックして、Sassを記述→保存すると、自動更新してCSSファイルを生成してくれます!
3.Sassをコーディング

実際にSass(Scss)をいつものようにコーディングしていきます。
そして、ファイルを保存すると、自動的にCSSファイルがコンパイルされます。
main.sassをコンパイルすれば、main.cssが作成され、content.scssをコンパイルすれば、content.cssが自動で生成されます!

Sassを編集する場合も、下のバーの「Watch Sass」をクリックし、Sassを記述し保存すれば、CSSに反映されます!
Watch Sass ボタンをクリックしている間は、Sass(Scss)とCSSファイルが連動しているので、全く同じデザイン処理のファイルが2つできるイメージ!
VSCodeでSassのコンパイル環境 まとめ

とっても簡単!面倒な環境構築をボタン一つでできるからとっても便利だね!
いかがでしたでしょうか!
VSCodeは使っている方はもちろん、VSCodeを使っていない方はこの機会に、VSCodeに乗り換えて、Sass(Scss)を使ってみてはいかがでしょうか?
この方法を使うメリットは、画面1つでSassのコンパイルが完結すると言う点です!
ぜひ、この記事を参考にVSCodeでSassのコンパイル環境を構築してみてはいかがでしょうか!
最後までご覧いただきありがとうございました!