Visual Studio CodeのEasy Sassを使って簡単にSassのコンパイルを行う方法
VisualStudioCodeのEasy Sassという拡張機能を使うと、Sassファイルの保存時に自動でコンパイルしてくれるようになります。
設定も非常に簡単なので「ただ単純にSassのコンパイルだけがしたい」場合にはもってこいです。
Easy Sassのインストール
Visual Studio CodeのMarketplace「Easy Sass – Visual Studio Marketplace」の「install」ボタンを押すか、エディタで「Easy Sass」で検索すると出てきます。
その後、エディタを再起動すれば使えるようになっています。
使い方
拡張機能の有効後に「.sass」「.scss」のファイルを保存すると、同じディレクトリ内にCSSファイルが出力されます。
［表示］→［出力］で「EasySass」を選択すると、出力先が見れたり、エラー文が見れます。
ただデフォルトの設定のままだと、「通常のCSSファイル」と「圧縮されたCSSファイル」の2つがコンパイルされたり、同じディレクトリ内に出力されてしまったりするので、その辺りを設定していきます。
設定
［設定］→［拡張機能］→［EasySass configuration］から設定の確認と変更ができます。
| 項目 | 内容 | 備考 |
|---|---|---|
| Compile After Save | 保存時にコンパイルするかどうかの選択。 | |
| Exclude Regex | コンパイルさせないファイルの指定 | 正規表現を使用する |
| Formats | 出力されるCSSのフォーマットを指定 | 選択できるフォーマットは下記の4種類 「nested」→ネストがインデントされた状態で出力 「expanded」→一般的なCSSのフォーマット 「compact」→セレクタからプロパティを1行にして出力 「compressed」→コメント、インデント、改行も削除して出力 |
| Target Dir | 出力するディレクトリを指定 |
