BracketsでSassをライブプレビューする

本記事は[Brackets Advent Calendar 2014](http://www.adventar.org/calendars/379)の20日の記事です。
<br />

ライブプレビューがとても簡単に行えることが魅力のBracketsですが、実はSassのライブプレビューにも対応しています。
方法は

* デフォルト機能によるもの
* エクステンション（brackets-sass）によるもの

の2通りあり、それぞれメリット・デメリットがあります。
以下、それぞれの方法でライブプレビューを実行するための解説をしていきます。
<br>

_**ディレクトリツリ**ー_

|──index.html
|
|──sass/ ──main.scss
|　　　　|──_var.scss
|　　　　|──_module.scss
|
|──css/（コンパイル前は空フォルダ）

# デフォルトの機能

**メリット**

* 必要なのはSassの実行環境のみ
* Compassにも対応

**デメリット**

* 反映されるのがファイル保存時のコンパイル後で、若干のラグがある<br>（Sassファイルが肥大化すると顕著になります）

## 実行方法

### 初期準備
予めPCにSassの実行環境を整えておきます。
Sassの導入方法については割愛させていただきます。以下の記事が大変参考になりますのでご参照くださいませ。

* [いまさら聞けないSassの使い方入門―― インストールとコマンド、Dreamweaver連携 ](http://www.atmarkit.co.jp/ait/articles/1402/19/news042.html)
* [これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)](http://liginc.co.jp/web/html-css/css/56599)

### 対象ファイルにwatchをかける
ライブプレビューしたいファイルにwatchをかけます。
この時、html側では吐き出されるCSSを読み込ませてください。（当たり前ですが）
アウトプットスタイル・ディレクトリの指定等があれば、この時一緒にオプションで指定します。
![default-01.png](https://qiita-image-store.s3.amazonaws.com/0/48404/b5e5309b-bd3f-a338-14f7-eac69884eae2.png)

### Sassファイルを編集する
準備はこれだけ、後は.scssを編集するだけです。

1.ソースサンプル

![default-02.png](https://qiita-image-store.s3.amazonaws.com/0/48404/9b64cc72-b642-4d9e-b7a7-67f1e5569d2a.png)
<br />

2..scss内でもきちんとハイライトしてくれます。

![default-03.png](https://qiita-image-store.s3.amazonaws.com/0/48404/e4940651-010a-df92-610a-a56459bb39e3.png)
<br />

3.Sassの各種機能の動作確認済みです。

![default-04.png](https://qiita-image-store.s3.amazonaws.com/0/48404/2240f053-27aa-f273-a163-ef718a75a21b.png)
<br />

4.CSSがコンパイルされた段階で自動的に反映されます。

![default-05.png](https://qiita-image-store.s3.amazonaws.com/0/48404/f5a594d1-8bff-6168-9e46-8a83c13557a9.png)
<br />


### Compass対応

実行原理は同じなので、Compassもライブプレビューに対応しているようです。
Compassの詳しい説明は、下記サイト様が参考になります。

* [CSSの常識が変わる！「Compass」の基礎から応用まで！](http://liginc.co.jp/designer/archives/11623)
* [CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。](http://howtohp.com/2011/09/19/compass/)

<br />
<br />


# brackets-sass
**メリット**

* リアルタイムに反映される（コードを編集した瞬間に即反映で、ファイル保存の必要なし）

**デメリット**

* 設定ファイルを用意する必要がある
* アウトプットスタイルがnested、compressedのみ（libSassがexpanded、compactに対応していないため）
* 動作設定が上手く反映されないことがある、動作判定がかなりシビア
* **compass非対応**（[後述](#compass%E9%9D%9E%E5%AF%BE%E5%BF%9C)）
* **`@import`のファイル数と実際のファイル数が一致しないと動作しない。**（[後述](#import%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%8C%E5%AE%9F%E9%9A%9B%E3%81%AB%E5%AD%98%E5%9C%A8%E3%81%97%E3%81%AA%E3%81%84%E3%81%A8%E5%8B%95%E4%BD%9C%E3%81%97%E3%81%AA%E3%81%84)）

## 実行方法

### 初期準備
まずは該当エクステンションをインストールします。
拡張機能マネージャーでBrackets SASSを検索するか[GitHubのリポジトリ](https://github.com/jasonsanjose/brackets-sass)からZIPをDL、該当ディレクトリ（Winの場合：ユーザー名\AppData\Roaming\Brackets\extensions\user）に展開してください。

### 設定ファイルをルートディレクトリに置く
プラグインの設定ファイルとなる.brackets.jsonをルートディレクトリに設置します。
Compassでいうconfig.rbのようなもので、オプションは以下の通りです。
（基本的に[公式ドキュメント](https://github.com/jasonsanjose/brackets-sass)に沿って解説しています）


|オプション名|説明|デフォルト値|設定値|
|:-:|:--|:-:|:-:|
| sass.enabled | Sassのコンパイルの有効・無効を制御します。 | true | trueまたはfalse |

#### Sassオプション

|オプション名|説明|デフォルト値|設定値|
|:-:|:--|:-:|:-:|
| outputDir | CSSとソースマップファイル（.css.map）出力先のディレクトリを相対パスで指定します。<br>**始めに"path"として指定したSassファイルのディレクトリ（この例では/sass/）が基準になることに注意してください。** | "path"で指定したディレクトリ | 相対パス |
| output | 出力CSSの名前を設定します。 | 始めに指定したSassファイルと同名.css | hoge.css<br>（拡張子まで必要） |
| includePaths | Sassファイル内で`@import`で読み込んでいるファイルを指定します。 | [&lt;empty&gt;] | hoge.scss<br>（該当ディレクトリ内を全て指定する場合は*.scss） |
| imagePath | 画像ディレクトリを指定します。こちらを設定することにより、Sassファイルに<br>`background-image: image-url('hoge.png')`<br>とimage-url後に直接ファイル名の指定をする記述が出来ます。 | null | 相対パス |
| outputStyle | コンパイル後のCSSスタイルを指定します。<br />libSass依存のため、2014/12現在はnestedかcompressedしか使用出来ません。 | nested | nested<br>または<br>compressed |
| sourceComments | 元のSassでは何行目に記述があるかのコメントを、CSSに出力するか設定します。<br>mapではoutputDirにソースマップファイルも出力されます。<br />**sourceCommentsはfileオプションを使用しているのみ動作します。dataフラグを使用している場合は何も起こりません。** <br>しかしながらdataフラグ使用時にfalseを指定すると、ソースマップファイルのみ出力され、コメントは出力されないことを確認しています。（要追加検証）| false | trueまたはfalse |
| sourceMap | ソースマップファイル名を指定します。sourceCommentsがmapに設定されている際に有効になります。 | 始めに指定したSassファイルと同名.css.map | hoge.css.map |

#### 設定例

```lang:.brackets.json
{
    "path": {
        "sass/main.scss": {//ここで監視対象ファイルを指定します
            "sass.enabled": true,
            "sass.options": {//ここから各種オプションを設定します
                "includePaths": [
                    "*.scss"
                ],
                "outputDir": "../css/",
                "imagePath": null,
                "sourceComments": "map",
                "outputStyle": "nested"
            },
            "linting.collapsed": true
        }
    }
}
```

### Sassファイルを編集する
.brackets.jsonを正しく設定・設置出来たら、後はSassファイルを編集していくだけです。
ソースを編集した瞬間に反映されるので、かなり快適です。

![ext-01.png](https://qiita-image-store.s3.amazonaws.com/0/48404/b50bff52-efa5-efdc-1ca6-d2aedcfc940f.png)



## 注意点

### ・動作設定が意図通りに反映されないことがある
私の環境ではimagePathが上手く動作しませんでした。
もしかしたらどこか設定抜けがあったのかもしれませんが、いずれにせよ細かい設定をしようと思うと[libSass](http://libsass.org/)の知識が必要になってくるため、少し敷居が高いかもしれません。

### ・compass非対応
そもそもCompassがlibSassをサポートしていないようです。
こちらの[compass-mixins](https://github.com/Igosuki/compass-mixins)を導入することによりlibSassでもCompassが使えるようになるらしいですが、未検証です。
→[ソース](https://github.com/jasonsanjose/brackets-sass/issues/34#issuecomment-61921708)

### ・`@import`のファイル数と実際のファイル数が一致しないと動作しない。
私の環境では、`@import`で指定したパーシャルファイルが該当ディレクトリ内に存在しない場合、または`@import`で指定していないパーシャルファイルが存在する場合、動作しなくなりました。

<br />
以上、大まかですがBracketsでSassをライブプレビューする方法のご紹介でした。
誤り・バージョンアップによる変化等あれば随時編集していきます。


Advent Calendar 次の記事は明日21日（日）、ろっとさんです！
よろしくお願いいたしますm(_ _)m