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

## SCSSまとめ集
1. [基本文法](https://qiita.com/hiro-hiro/items/c981a6a11ee69fabcb74)
1. [関数](https://qiita.com/hiro-hiro/items/b8bb3f3ee99cbac5c828)
1. [コンパイル方法](https://qiita.com/hiro-hiro/items/eaaad48372d2dfb32066)

## 目次
1. [Live Sass Compilerを使用したコンパイル方法](#1-live-sass-compilerを使用したコンパイル方法)
1. [コンパイル場所を指定する](#2-コンパイル場所を指定する)
1. [Live Sass Compilerのsetting.jsonについて](#3-live-sass-compilerのsettingsjsonについて)

## 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をインストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662954/14e4df66-0fed-abe1-b890-75f8c5d690a6.png)

3. SCSSファイルを作成し、コードを記述した後、下の「Watch Sass」を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662954/e2dee37c-5e75-f275-c2ab-20cfed5574ed.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662954/f8a8191f-0393-bed7-712c-b9fe1c82972d.png)

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

### ・エディタ自体にコンパイル場所を設定する場合
1. 拡張機能より「Live Sass Compiler」を右クリック→拡張機能の設定をつける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662954/91984fc9-348b-9a10-de19-f309acc62a07.png)

2. ユーザータブを選択し、Formats→settings.jsonで編集をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662954/41b704f7-7d3d-6458-5784-eed2279b1884.png)

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を指定する

```css:css
/* expanded */
p {
  font-size: 16px;
}

p span {
  color: blue;
}

/* compact */
p { font-size: 16px; }

p span { color: blue; }

/* compressed */
p{font-size:16px}p span{color:blue}

/* nested */
p {
  font-size: 16px; }
  p span {
    color: blue; }
```
* extensionName...拡張子を設定
* savePath...コンパイル先のパスを設定


4.コンパイルすると以下のような感じになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662954/cb5e4bc9-a7b9-b974-e6e2-20f3be62f5ea.png)

### ・プロジェクトごとにコンパイル場所を設定する場合
1. 上記の2.の手順にて、ユーザータブではなく、ワークスペースタブを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662954/ef8d24a0-0cf2-98b7-8acc-c113d968585f.png)

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


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

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

詳しい内容は後で記載。