More than 3 years have passed since last update.

3分でできるVisualStudioCodeのSass環境構築(Live Sass Compiler)

Last updated at 2020-01-27Posted at 2020-01-27

CSSプリプロセッサ―であるSass。
Sassを導入することでコードを書く量が減り開発スピードが上がります。また、何より関数やファイル分割機能が使えるので保守・更新性が格段に上がります。

特にVisualStudioCodeだとExtentionsで簡単に環境構築出来てしまうので、導入していない人は損かもしれません、、、

#Step1 ExtensionsでLive Sass Compilerを追加

VisualStudioCodeのExtensionsでLive Sass Compilerを検索、Installボタンで追加しましょう。

#Step2 scssファイルを作る

cssを出力したいフォルダに.scssファイルを作りましょう。

#Step3 Watch Sassをクリック

ステータスバーに表示される「Watch Sass」をクリックすると、「Watching...」状態になります。
.cssファイルと.css.mapファイルが生成されれば成功です！

打ち込んだscssがリアルタイムでcssにコンパイルされる環境になりました👍

#オプション
デフォルトで十分なためあまりいじる必要性はないですが、cssを圧縮してコンパイルできたりもします。
私はVisualStudioCodeのsetting.jsonに以下を追加し出力したcssを圧縮してます。

"liveSassCompile.settings.formats":[
    {
        "format": "compressed",
    },
]

オプションで出力パスを変えたり、AutoprefixerのOn/Offなどができます。
詳しくは公式ドキュメントをご覧ください！
https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

#Sassの使い方例

Sassの便利なところは機能や内容ごとにファイル分割し管理可能なところ。

私は_settings.scssなどのファイルを作って変数や関数を入れてます。
（ファイル名の最初にアンスコを入れるとコンパイルされません）
変数には色や統一したい要素や余白のサイズを入れ、関数には@mixinでメディアクエリなどをぶちこんでいます。

また部位ごとに_header.scssなどでレイアウトを作成。
style.scssで全ての分割ファイルをまとめてstyle.cssとして出力しています。

是非簡単にSass環境を構築しちゃってください！