【初心者向き】VSCodeでSCSSをコンパイルする方法-設定編 2023年版

こんにちは。
今回は、Live Sass Compilerを使ってVSCodeでSCSSをコンパイル！
拡張機能インストールからCSSの書き出しまでを解説して行きます！

SCSSのコンパイルする方法は様々ありますが、
今回は導入が簡単で初心者の方ににも扱いやすい、VS Codeのプラグイン『Live Sass Compiler』を使ってSCSSのコンパイルする方法を解説して行きます。

お使いのパソコンにVScodeをインストールされていない場合は、以下でインストール方法を解説しています！

【入門編：インストール】わかりやすくVisual Studio Codeの使い方を解説！

Visual Studio Codeの魅力と概要 Visual Studio Code（VScode）は、Microsoftが開発した無料のコーディングエディターとして知られています。このエディターの最大の魅力は、その軽量性と高速な動作です。更に、多様な拡張機

2022年06月27日

その他

Live Sass Compilerをインストール

VSCodeの拡張機能のメニューからインストール

上記の手順で進めれば、簡単に『Live Sass Compiler』をインストール出来ます！

Live Sass Compilerの設定

作業環境に合わせて 「Live Sass Compiler」 の設定を行います。

拡張機能のサイドバーを開き『Live Sass Compiler』の「歯車マーク」をクリックします。
表示されたメニューから「拡張機能の設定」を選択すると『Live Sass Compiler』の設定画面が表示されるので必要に応じて設定していきますが全部英語で分かりにくいです…。
ですので、以下をダウンロードして設定するのが簡単です！

設定ファイルのダウンロード

上記の『Live Sass Compiler』の「歯車マーク」から設定も出来ますが、
以下のダウンロードファイルから設定した方が、より直感的で楽かと思います。

まずは、ダウンロードしたファイルを任意フォルダの中に入れます。
任意のフォルダは作業環境となりますので、お使いの環境に合わせて配置ください。

.code-workspaceのリネーム

.vscodeフォルダの中には『SCSS.code-workspace』という設定ファイルが入っています。
SCSSの箇所は好きな名前に変更でき、設定した名前がVScodeのワークスペースの名前になります。
以下は「あいうえお.code-workspace」とした場合の例です。

.code-workspaceの編集

ダウンロードしたファイルの中身はこのようになっています。
普通にWebサイトを開発する場合に、最低限必要な情報を予め記載しています。

{
    "folders": [
        {
            //記入例 C:\\Desktop\\作業フォルダ
            "path": "作業フォルダパス" 
        }
    ],
    "settings": {
        "liveSassCompile.settings.formats":[
            {
                "format": "compressed",
                "extensionName": ".min.css",
                "savePath": "/css"             
            },
        ],
        "liveSassCompile.settings.excludeList": [ //対象外とするフォルダを指定
            "**/wp-admin/**",
            "**/wp-content/**",
            "**/wp-includes/**",
        ],
        "liveSassCompile.settings.autoprefix": [ //ベンダープレフィックスの指定
            "last 2 versions",
            "ie >= 11",
            "Android >= 4",
            "ios_saf >= 8"
        ],
    }
}

folders

"folders": [
        {
            "path": "作業フォルダパス" 
        }
],

『folders』では、作業環境ディレクトリの設定を行います。
好きな場所に開発環境となるフォルダを作成し、そのディレクトリパスを設定します。

liveSassCompile.settings.formatsの設定

"liveSassCompile.settings.formats":[
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "/css"             
    },
],

liveSassCompile.settings.formatsは、コンパイル時の出力するcssファイルのフォーマット設定となっております。

format

format設定は、出力するcssファイルの中身をどのように書き出すかという設定になります。

・expanded
・compact
・compressed
・nested

デフォルトはexpandedとなっております。

執筆者のおすすめはcompressedです。

/* expanded */
p{
    font-size: 14px;
    margin-bottom: 15px;
}
p span{
    color: #c00;
}

/* compact */
p{font-size: 14px;margin-bottom: 15px;}
p span{color: #c00;}

/* compressed  */
p{font-size: 14px;margin-bottom: 15px;}p span{color: #c00;}

/* nested */
p {
    font-size: 14px;
    margin-bottom: 15px;}
    p span {
      color: #c00; }

extensionName

extensionName設定は、コンパイルしたcssファイルの拡張子設定です。
デフォルトの設定は .css です。
formatにcompressedを指定している場合に.min.cssを指定しておくと、軽量化されているコードという風にわかりやすいと思います。

savePath

savePath設定は、コンパイルしたcssファイルの出力先を指定します。
「 / 」で始めた場合は、ワークスペースをrootとして処理されるので、トップディレクトリに出力されます。

例えば、次のディレクトリ構造で用意したとします。

ワークスペース
 │ - css
 │ - scss

コンパイル結果をcssディレクトリに出力する場合は、savePath に /cssを指定します。

liveSassCompile.settings.excludeListの設定

コンパイル対象から除外するファイルを指定します。
グロブ（ glob ）と呼ばれるワイルドカードを使ったパターンで指定することができます。
次の例は、wp-admin、wp-includes ディレクトリ配下にあるすべてのファイルと、
.vscode ディレクトリ配下の全てのファイルがコンパイル対象から除外されます。

{
    //対象外とするフォルダを指定
    "settings": {
        "liveSassCompile.settings.excludeList": [ 
            "**/wp-admin/**",
            "**/wp-includes/**",
            "".vscode/**",
        ],
    }
}

liveSassCompile.settings.autoprefixの設定

コンパイル時に自動でベンダープレフィックスを追加する条件を設定します。
例えば、「シェアが1%以上」または「最新バージョンから数えて2つまで 」という条件は以下のように指定します。

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

SCSS.code-workspaceに含まれるliveSassCompile.settings.autoprefixの設定
こちらは、「最新バージョンから数えて2つまで 」で且つ
ieはバージョン11 、Androidはバージョン4 、ios safariはバージョン8まで、最新バージョンから数えて2つまでじゃなくても対応させる！！という記述となります。
しばらくの間は、こちらの記述で良いと思います。

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

VScodeで確認してみよう

さて、Live Sass Compilerの設定はうまく行きましたか？

万が一起動しなかった場合は、設定ファイルの中で「 , 」や「 {} 」等が抜けている可能性があります。
また、VScodeは開いたが、ワークスペースにフォルダが無いという場合は、「 folders 」の記述に誤りがある可能性があるので見直してみてください。

では、早速デスクトップの「scss_test」という開発環境で試してみましょう。

{
    "folders": [
        {
            "path": "C:\\Users\\user\\Desktop\\scss_test"
        }
    ],
    "settings": {
        "liveSassCompile.settings.formats":[
            {
                "format": "compressed",
                "extensionName": ".min.css",
                "savePath": "/css"             
            },
        ],
        "liveSassCompile.settings.excludeList": [ //対象外とするフォルダを指定
            "**/lib/**"
            ".vscode/**"
        ],
        "liveSassCompile.settings.autoprefix": [ //ベンダープレフィックスの指定
            "last 2 versions",
            "ie >= 11",
            "Android >= 4",
            "ios_saf >= 8"
        ],
    }
}

ディレクトリは以下のように設定しました。

ワークスペース
 │ - .vscode
 │   └ vscode.scss //書き出さないscssファイル
 │ - css
 │ - scss
 │   └ style.scss
 │ - lib
     └ test.scss //書き出さないscssファイル

liveSassCompile.settings.formatsで、コンパイル先が/cssで.min.cssという拡張子を指定。
liveSassCompile.settings.excludeListで、全ての「lib」配下、「.vscode/」配下は対象外を設定。

VScodeを起動

それでは、前章で作った『.code-workspace』をダブルクリックするとVScodeが起動します。
VScodeが起動したら、SCSSコンパイラーを動かすため、画面下の「Watch Sass」をクリックします。

min.cssの生成

クリックすると「Watching」に変わりコンパイルされるモードに変わり、style.min.cssが生成されました。

style.min.cssの中身を見てみよう

min.cssの生成で生成されたstyle.min.cssが生成の中身を見てみましょう。
今回は、全ての「lib」配下、「.vscode/」配下は対象外とし、.min.cssという拡張子で出力するように設定しました。
実質、/scss/style.scssのコードがstyle.min.cssとして生成されます。

p{font-size:14px;margin-bottom:15px}p span{color:#c00}

「lib」配下、「.vscode/」配下のscssはコンパイルされず、「scss/style.scss」のコードだけがコンパイルされましたね。

まとめ

VScodeとLive Sass Compilerを使ったscssのコンパイルについてはいかがでしたでしょうか？
Live Sass Compilerには、まだまだ細かな設定項目がありますが、今回記載した情報だけでも充分だと思いますので、
是非、VScode設定ファイルをダウンロードして、scssのコンパイルを試してみてください。

scssのコンパイル方法を習得してしまうと、いちいちベンダープレックスを確認して記述する事がなくなり、
大幅な作業効率アップが期待できます！

今回は以上となります。
最後まで読んでいただきありがとうございました。