SCSS　まとめ３（コンパイル方法）

SCSSまとめ集

1. 基本文法
2. 関数
3. コンパイル方法

目次

1. Live Sass Compilerを使用したコンパイル方法
2. コンパイル場所を指定する
3. Live Sass Compilerのsetting.jsonについて

1. Live Sass Compilerを使用したコンパイル方法

公式サイト
https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

1. エディタはVisual Studio Codeを使用。

2. 拡張機能としてLive Sass Compilerをインストールする。
   

3. SCSSファイルを作成し、コードを記述した後、下の「Watch Sass」を押す。
   

4. 同一フォルダにcssファイルとmapファイルが作成される。

   • mapファイルには、参考にしたscssファイルと出力されたcssファイルの情報が記載されてある。
   • 以下、保存する度にコンパイルが自動でされる。
   • 自動コンパイル時に、Successなら成功、Errorなら失敗（コード内にエラーがある）
   • 自動コンパイルをやめたい場合は、「Watching...」を押す。

2. コンパイル場所を指定する

・エディタ自体にコンパイル場所を設定する場合

1. 拡張機能より「Live Sass Compiler」を右クリック→拡張機能の設定をつける
   

2. ユーザータブを選択し、Formats→settings.jsonで編集をクリック
   

3. 例として以下のコードをsettings.jsonに記載する()

    "liveSassCompile.settings.formats":[
        // This is Default.
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": null
        },
        // You can add more
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/dist/css"
        },
        // More Complex
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css/"
        }
    ]

• format　コンパイル後のcssファイルの記載方法。expanded, compact, compressed, nestedを指定する

/* expanded */p{font-size:16px;}pspan{color:blue;}/* compact */p{font-size:16px;}pspan{color:blue;}/* compressed */p{font-size:16px}pspan{color:blue}/* nested */p{font-size:16px;}pspan{color:blue;}

• extensionName...拡張子を設定
• savePath...コンパイル先のパスを設定

4.コンパイルすると以下のような感じになる。

・プロジェクトごとにコンパイル場所を設定する場合

1. 上記の2.の手順にて、ユーザータブではなく、ワークスペースタブを選択。
   

2. ローカルに作成されたsettings.jsonに同じように記述してコンパイルすればOK。

3. Live Sass Compilerのsettings.jsonについて

詳しい内容は後で記載。