tamlog

主にwebのフロント回り たまに登山

Emmet+Compass

スポンサーリンク

Emmetの「snippets.json」にCompassの機能を登録しただけなのですが、 ひゃー便利便利!もうCompassもEmmetも手放せないですねー。

TextExpander的な事ですが、チーム内に共通のスニペット管理アプリが無い場合や Mac、Windowsだろうが関係ないですね。 素晴らしい! WordPressのテンプレートタグとかもまとめちゃえばいいかもです。

追加の仕方はこちらを参考にしてください。 Emmetの拡張方法(snippets.json)

追加した内容はこんな感じ。 「snippets-compass.json」

スニペット cplink
追加内容 "@include link-colors(${1:#fff},${2:#fff},${3:#fff},${4:#fff});"
展開されるコード @include link-colors(#fff,#fff,#fff,#fff);
スニペット cpw
追加内容 "image-width("|");"
展開されるコード image-width("");
スニペット cph
追加内容 "image-height("|");"
展開されるコード image-height("");
スニペット cpspr
追加内容 sprite-map("${1}/*.png", \$spacing: ${2:50px}, \$layout: ${3:vertical});
展開されるコード sprite-map("/*.png", $spacing: 50px, $layout: vertical);

などなど