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 をどうコンパイルするか設定。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