# Visual Studio CodeのEasy Sassを使って簡単にSassのコンパイルを行う方法

URL: https://webrandum.net/vscode-easy-sass/
公開日: 2019-03-04
更新日: 2019-03-04
カテゴリー: 作業効率化
タグ: Sass, VisualStudioCode
出典: Webrandum（著者: サイトウ マサカズ）

VisualStudioCodeのEasy Sassという拡張機能を使うと、Sassファイルの保存時に自動でコンパイルしてくれるようになります。

設定も非常に簡単なので「ただ単純にSassのコンパイルだけがしたい」場合にはもってこいです。

## Easy Sassのインストール

![EasySassのインストール](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_3-2-1024x543.png)

Visual Studio CodeのMarketplace「[Easy Sass – Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=spook.easysass)」の「install」ボタンを押すか、エディタで「Easy Sass」で検索すると出てきます。

その後、エディタを再起動すれば使えるようになっています。

## 使い方

拡張機能の有効後に「.sass」「.scss」のファイルを保存すると、同じディレクトリ内にCSSファイルが出力されます。

［表示］→［出力］で「EasySass」を選択すると、出力先が見れたり、エラー文が見れます。

![EasySassのコンパイル](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_1-2-1024x616.png)

ただデフォルトの設定のままだと、「通常のCSSファイル」と「圧縮されたCSSファイル」の2つがコンパイルされたり、同じディレクトリ内に出力されてしまったりするので、その辺りを設定していきます。

### 設定

［設定］→［拡張機能］→［EasySass configuration］から設定の確認と変更ができます。

![EasySassの設定画面](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_2-2-1024x616.png)

| 項目 | 内容 | 備考 |
| --- | --- | --- |

| Compile After Save | 保存時にコンパイルするかどうかの選択。 |   |
| --- | --- | --- |

| Exclude Regex | コンパイルさせないファイルの指定 | 正規表現を使用する |
| --- | --- | --- |

| Formats | 出力されるCSSのフォーマットを指定 | 選択できるフォーマットは下記の4種類 「nested」→ネストがインデントされた状態で出力 「expanded」→一般的なCSSのフォーマット 「compact」→セレクタからプロパティを1行にして出力 「compressed」→コメント、インデント、改行も削除して出力 |
| --- | --- | --- |

| Target Dir | 出力するディレクトリを指定 |   |
| --- | --- | --- |