[Sass & Compass] Emmet: filterでコメントを付けたり、実体参照を変換する

今、ドットインストールで filter を知りました。
コメントを付けたり、実体参照を変換してくれたりべんり。

[markdown]

> * [#07 filterを使ってみよう | Emmet/Zen-coding入門 – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_emmet/25107)
> * [Emmet Documentation | Filters](http://docs.emmet.io/filters/)

|（パイプ）につづけて入力します。

* HAML syntax: haml
* HTML syntax: html
* Escape: e
* Comment tags: c
* XSL tuning: xsl
* Single line: s
* Trim line markers: t

よく使いそうなものを確認します。

## |e 実体参照へ変換

こんな内容を展開する。

“`html
div{Sass&Compass}|e
“`

本文内も変換されています。

“`html
<div>Sass&Compass</div>
“`

今後は実体参照なんだっけと調べなくてもすみそう。

## |c \#id, .class コメントを自動で追加

こんな形式のありそうなレイアウト。

“`html
div#container>#header+#content+#footer|c
“`

.erb 形式のコメントを付けてくれます。

“`html

“`

### 前にもコメントを付けたい

→定義できます。

> * [preferences.json](http://docs.emmet.io/customization/preferences/)
Sublime Text の場合、どこで定義するのか？

野生の勘ですすめます。

メニューから
「Sublime Text 2 > Preferences > Package Settings > Emmet > Settings – User」
Emmet.sublime-settings を編集。

“`json
{
“preferences”: {
“filter.commentBefore”: “\n”
}
}
“`

実行。

“`html

“`

できました。

## |t Trim line markers

追記

> * [#10 Wrap with Abbreviationを使おう | Emmet/Zen-coding入門 – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_emmet/25110)
> * [Wrap with Abbreviation](http://docs.emmet.io/actions/wrap-with-abbreviation/)
[/markdown]