Visual Studio Code(VS Code)でSassを使えるようにする

1. インストール

**「Code > 基本設定 > 拡張機能」または、「shift + command + x」で拡張機能画面に移動し、検索ボックスから、「Live Sass Compiler」**という拡張機能を探し、インストールします。

2. 使い方

alt
「Watch Sass」ボタンの位置

まずは、「.scss」という形式のファイルを作成します。ここでは、「style.scss」というファイルを作成したとします。「Live Sass Compiler」をインストールすると画面右下に「Watch Sass」というボタンが表示されるので、そのボタンを押すと「style.scss」ファイルの監視がスタートし、コンパイルした「style.css」と「style.css.map」というファイルが生成されます。監視状態のまま「style.scss」を更新・保存すると「style.css」ファイルも更新されます。

3. 設定

alt

「Live Sass Compiler」の設定をするには、拡張機能一覧から「Live Sass Compiler の歯車 > 拡張機能の設定」から行えます。

alt

設定は、ユーザー設定(デフォルトの設定)、ワークスペース設定(現在のディレクトリでのみ有効な設定)を選択し、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 をどうコンパイルするか設定。expandedcompactcompressednestedから設定します。

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