最近ではもう手放せなくなっている高機能エディタ「Visual Studio Code(VSCode)」。
拡張機能を追加することで、どんな開発にも対応できるのが便利すぎて他に浮気できないくらい。
今回はVSCodeを使ってSassコンパイルを行う方法をメモ。
Sassとは？
VSCodeでのコンパイル云々に入る前に、おさらい。
Sass: Syntactically Awesome StyleSheet
https://sass-lang.com/
Sassとは、Syntactically Awesome StyleSheetの略で、翻訳すると「構文的に素晴らしいスタイルシート」となる。
開発現場ではscssとかsassとかを総じて「サス」「サース」とか言われる。
それぞれの言葉の意味を整理する。
- Sass
- CSSを拡張したスクリプト言語およびコンパイラ。
コンパイルすることで.cssファイルを生成できる。 - sass
- Sassで使用できる構文のひとつ。拡張子は「.sass」。インデント構文。
- scss
- Sassで使用できる構文のひとつ。拡張子は「.scss」。ブロック書式。
sassとscssの違い
Sassにとって、scssの方が新しい構文となっており、開発現場ではこちらが利用されることが多い。
そもそも公式サイトでもscssの記法ばかり説明されていて、少しsassが可哀相…。
それぞれの書き方の違いを見てみる。
scss
$red: #f66;
.sample1 {
color: $red;
font-weight: bold;
}
.sample2 {
border: 1px solid $red;
}sass
$red: #f66
.sample1
color: $red
font-weight: bold
.sample2
border: 1px solid $red上記の通り、scssは基本的にcssと書き方は同じで、Sassの機能を利用できる。
sassはシンプルに記載できるが、cssとは少し書き方が異なるので慣れが必要。
個人的には、制御構文を使うなら、sassの方が書きやすいし見やすい。でも主流はscssなんだよな…。
Sassの機能
SassはひとことでいうとCSSをプログラムできるやつ。
言葉としておかしい気もするけど、そこは感覚的なアレで。
プログラムと考えると、できることと言えばつまりこういうこと。
- 変数が使える
- 制御構文が使える
- ミックスイン…関数っぽいやつが使える
これ以上は本題じゃないので割愛。使えば分かるし。
VSCodeでSassコンパイルする
Sassを環境にインストールすると、.sassや.scssファイルのコンパイル（.cssファイルへの変換）が可能になる。
VSCodeを使っていると、拡張機能のインストールだけで準備は整う。
拡張機能のインストール
Market Placeで検索すると、ズラーッといっぱい出てくる。
ブログとかでよく紹介されている「Live Sass Compiler」は、sass/scssファイルを自動でコンパイルしてくれる優れもの。
最終更新が2018年11月と古いのが気になるけど、便利なのでこちらをインストールする。
Live Sass Compilerの設定
インストールして、VSCode下部にある「Watch Sass」をクリックすると、ワークスペース内を自動でサーチしてコンパイルを開始してくれる。
小規模ソースならそれでもいいけど、すでに大量のソースがある場合、関係ないファイルまでコンパイルされてしまうので設定を行う。
settings.jsonを開き、以下の記述で対象外とするディレクトリを指定する。
settings.json
:
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
]
:
これでSassのコンパイル環境がVSCodeで実装できた。
