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

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

|e 実体参照へ変換

こんな内容を展開する。

div{Sass&Compass}|e

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

<div>Sass&Compass</div>

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

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

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

div#container>#header+#content+#footer|c

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

<div id="container">
  <div id="header"></div>
  <!-- /#header -->
  <div id="content"></div>
  <!-- /#content -->
  <div id="footer"></div>
  <!-- /#footer -->
</div>
<!-- /#container -->

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

→定義できます。

  • preferences.json
    Sublime Text の場合、どこで定義するのか?
    野生の勘ですすめます。
    メニューから
    「Sublime Text 2 > Preferences > Package Settings > Emmet > Settings – User」
    Emmet.sublime-settings を編集。
{
"preferences": {
  "filter.commentBefore": "<!-- <%= attr(\"id\", \"/#\") %><%= attr(\"class\", \"/.\") %> -->\n"
}
}

実行。

<!-- /#container -->
<div id="container">
  <!-- /#header -->
  <div id="header"></div>
  <!-- /#header -->
  <!-- /#content -->
  <div id="content"></div>
  <!-- /#content -->
  <!-- /#footer -->
  <div id="footer"></div>
  <!-- /#footer -->
</div>
<!-- /#container -->

できました。

|t Trim line markers

追記