Visual Studio Code(VS Code)でSassを使えるようにする
1. インストール
**「Code > 基本設定 > 拡張機能」または、「shift + command + x」で拡張機能画面に移動し、検索ボックスから、「Live Sass Compiler」**という拡張機能を探し、インストールします。
2. 使い方
「Watch Sass」ボタンの位置
まずは、「.scss」という形式のファイルを作成します。ここでは、「style.scss」というファイルを作成したとします。「Live Sass Compiler」をインストールすると画面右下に「Watch Sass」というボタンが表示されるので、そのボタンを押すと「style.scss」ファイルの監視がスタートし、コンパイルした「style.css」と「style.css.map」というファイルが生成されます。監視状態のまま「style.scss」を更新・保存すると「style.css」ファイルも更新されます。
3. 設定
「Live Sass Compiler」の設定をするには、拡張機能一覧から「Live Sass Compiler の歯車 > 拡張機能の設定」から行えます。
設定は、ユーザー設定(デフォルトの設定)、ワークスペース設定(現在のディレクトリでのみ有効な設定)を選択し、setting.json に記述していきます。下記のような設定が可能です
- Autoprefix - 自動でベンダープレフィックスを付与する設定
- ExcludeList - コンパイル対象から除外するフォルダ/ファイル
- Formats - コンパイルの設定
- GenerateMap - MAP ファイルを出力するかしないか
- includeItems - コンパイル対象に含めるフォルダ/ファイル
- ShowOutputWindow - 出力パネルを表示するかしないか
自動でベンダープレフィックスを付与したい場合
ベンダープレフィックスの対象は細かく設定できるようです。下記の場合だと、1%以上のシェアがあるブラウザ、最後の 2 バージョンのブラウザを対象にベンダープレフィックスを付与する設定です。
//setting.json
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
],
ベンダープレフィックス設定を詳しく知りたい場合
GitHub - browserslist/browserslist
コンパイル対象から除外したいフォルダ/ファイルがある場合
コンパイルの対象から除外したいフォルダ/ファイルがある場合は下記のように設定できます(下記はデフォルト設定)
//setting.json
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
**
- すべての...
コンパイルの設定
//setting.json
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": null
}
],
format
CSS をどうコンパイルするか設定。expanded
、compact
、compressed
、nested
から設定します。
extensionName
ファイル形式名を設定。.css または.min.css を設定。
savePath
保存先を設定。デフォルトの null の状態だと.scss ファイルと同じ階層に.css ファイルが保存されます。例えば、css フォルダを作成し、保存先にしたい場合、/css/(root を基準にしたパス)または、~/css/(.scss ファイルを基準にしたパス)に設定する
/*expanded*/
/*スタンダード*/
main {
background: red;
}
main p {
color: blue;
}
/*compact*/
/*プロパティなどの改行をなくす*/
main {
background: red;
}
main p {
color: blue;
}
/*compressed*/
/*空白・改行をなくし、一番圧縮*/
main {
background: red;
}
main p {
color: blue;
}
/*nested*/
/*ネストを維持*/
main {
background: red;
}
main p {
color: blue;
}
MAP ファイルが不要の場合
.css.map
ファイルが不要の場合は下記を記述します。
//setting.json
"liveSassCompile.settings.generateMap": false,
.css.map
- css を圧縮した場合、コードの行がわからなくなるため、scss ファイルでコードがどの行にあるかなどが分かるようにするファイル
Live Sass Compiler の公式ページ
vscode-live-sass-compiler · GitHub