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

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

目次
1. Step1 ExtensionsでLive Sass Compilerを追加
2. Step2 scssファイルを作る
3. Step3 Watch Sassをクリック
4. オプション（cssを圧縮する）
5. Sassの使い方例

Step1 ExtensionsでLive Sass Compilerを追加

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

Step2 scssファイルを作る

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

ステータスバーに表示される「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の便利なところは機能や内容ごとにファイル分割し管理可能なところ。

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

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

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