,

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

公開日: 2013/10/29
更新日: 2020/10/04

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

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

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

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

Contents

|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 -->

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

→定義できます。

野生の勘ですすめます。

メニューから
「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

追記