VScode

「Live Sass Compiler」の「ギアマーク」をクリック、「拡張機能の設定」を選択すると「Live Sass Compiler」の設定項目だけを表示できます。

＜設定できる6項目＞

項目: 内容
Formats: コンパイル後のCSSファイルのフォーマットや保存先のパスなど
Autoprefix: 自動でベンダープレフィックスを追加する際に対象とするブラウザの条件
Generate Map: コンパイル時にMAPファイルを出力するかどうか
Exclude List: コンパイル対象から除外するファイル
Include Items: コンパイル対象に含めるファイル
Show Output Window: 出力パネルを自動的に表示するかどうか

Formats

・コンパイル後のCSSファイルの「フォーマット・ファイル名・保存場所」を指定できる

・3項目を1つのセットとして、複数のセットを設定できる

setting.json

                  
                "liveSassCompile.settings.formats": [
                // 確認用の読みやすいフォーマット
                {
                  "format": "expanded",
                  "extensionName": ".css",
                  "savePath": "/assets/css"
                },

                // 読み込み用の軽量化されたフォーマット
                {
                  "format": "compressed",
                  "extensionName": ".min.css",
                  "savePath": "/assets/css"
                }
                ]

format

                  
                "format": "expanded", //読みやすい形式で、各プロパティが改行されます。開発中に最も見やすい
                "format": "compact", //各セレクタが1行でまとめられ、やや省スペース。見やすさと圧縮の中間。
                "format": "compressed", //すべての余白や改行を削除し、最小限に圧縮。公開用や本番環境向け。
                "format": "nested", //SCSSのネスト構造に近い形で出力される。構造が分かりやすいがやや冗長。

・formatはexpanded、compact、compressed、nestedの4種類から選択できる

・デフォルト設定はexpanded

extensionName

                  
                "extensionName": ".css",
                "extensionName": ".min.css",

・拡張子を指定できます。デフォルト設定は.cssです。

・formatでcompressedを指定している場合に.min.cssを指定しておくと、軽量化されているコードというのが一目でわかります。

savePath

                  
                "extensionName": "/assets/css",
                "extensionName": "/css",

・保存場所のパスを指定します。デフォルト設定は「null」Sassファイルと同じ場所に保存される

・パスを指定する場合、以下の指定方法のどちらかで指定

・先頭を/で始めると、ワークスペースをrootとして、出力先のパスを指定できます。/css/のように指定すると、root直下のcssディレクトリに保存されます。

・先頭を~で始めると、コンパイルするSassファイルを起点に出力先のパスを指定できます。~/css/のように指定すると、Sassファイルと同じ階層のcssディレクトリに保存されます。末尾の/は無くてもディレクトリと認識します。

・「savePathReplacementPairs」は入力パスごとに出力先を個別指定できる

Autoprefix

・自動でベンダープレフィックスを追加する設定（指定ないときは自動付与されない）

・対応したいブラウザの条件を指定することで、必要なベンダープレフィックス（-webkit-, -moz-, -ms-, -o-など）を自動で追加してくれます。

・条件の指定はBrowserslistのフォーマットで記述します。判定はブラウザごとではなくバージョンごとに行われます。

◆「シェアが1%以上あるブラウザ」または「最後から2バージョンのブラウザ」

                  
                "liveSassCompile.settings.autoprefix": [
                  "> 1%",
                  "last 2 versions"
                ]

◆「日本国内のシェアが1%以上」または「最新バージョンから数えて2つまで」

                  
                "liveSassCompile.settings.autoprefix": [
                  "> 1% in JP",
                  "last 2 versions"
                ]

◆「最新バージョンから数えて2つまで」で且つ「ieはバージョン11」「Androidはバージョン4」「ios safariはバージョン8」まで

                  
                "liveSassCompile.settings.autoprefix": [
                  "last 2 versions",
                  "ie >= 11",
                  "Android >= 4",
                  "ios_saf >= 8"
                ]

◆無効にしたければ"liveSassCompile.settings.autoprefix": []のように値を空の状態のまま

                  
                "liveSassCompile.settings.autoprefix": []

Generate Map

・ソースファイルの情報が記載されたmapファイルを作成するかどうかの指定

・デフォルト設定は「true」。MAPファイルが不要な場合は「false」を指定する

◆「シェアが1%以上あるブラウザ」または「最後から2バージョンのブラウザ」

                  
                //mapファイル作成する
                "liveSassCompile.settings.generateMap": true

                  
                //mapファイル作成するしない
                "liveSassCompile.settings.generateMap": false

Exclude List

・指定したフォルダーに含まれるSassファイルをコンパイル対象から除外できます。

                  
                "liveSassCompile.settings.excludeList": [
                    "**/data.scss",
                    "**/data/**"
                ]

上記のように記述すると、すべてのディレクトリのdata.scssと、すべてのdataディレクトリの中身がコンパイル対象から除外される

Include Items

・指定したファイルのみコンパイル対象になります。

・この設定はExclude Listの反対で、コンパイルしたいファイルが少ない時はこちらで設定した方が簡単

                  
                "liveSassCompile.settings.includeItems": [
                    "**/include.scss"
                ]

上記のように記述すると、すべてのディレクトリのinclude.scssがコンパイルされます。もしExclude Listと対象のファイルが重なった場合、Exclude Listが優先されます。

Show Output Window

・出力ウィンドウの表示設定

                  
                //成功・失敗にかかわらず常に出力ウィンドウが開く
                "liveSassCompile.settings.showOutputWindow": true

                  
                //コンパイル結果に関係なく開かない
                "liveSassCompile.settings.showOutputWindow": false

おぼえがき