お疲れさまです、デザイナーのサリーです。
LIGにSassがもたらされて1年…
たまにあるCSSで書かなきゃいけない機会にネストして書いてハッとしてキーーッてなったりしますよね（Sassあるある）。
私はDreamweaverを使いつつたまーにSublimeText2を使っているのですが、DreamweaverはSassのコードヒントが出ないので、Compassのmixinを呼び出すのがかなり面倒です。
簡単に呼び出せるようにスニペット機能を使おうと思ったのですが、Emmetのスニペットを使う方が簡単そうだったので、やり方に慣れていることもありEmmetを使うことにしました。
今回はDreamweaverまたはSublimeText2で、Emmetにオリジナルスニペットを登録する方法を紹介します。
Emmetをインストールする
すでにEmmetをインストール済の方はこの項目は飛ばしてください〜。
EmmetはZen Cordingの進化版で、簡略化したコードを使ってコーディングが出来る、効率化を図りたい人にぴったりのライブラリです。
以下の方法でインストール出来ます。
Dreamweaver
配布先の文中にある「Emmet.zxp」というリンクを押してファイルをダウンロードします。
https://github.com/emmetio/dreamweaver
落としたファイルをダブルクリックすると「Adobe Extension Manager」が開き、Emmetがインストールされます。
SublimeText2
「Package Control: Install Package」から「Emmet」を検索して選択、インストールします。
スニペットを作る
次に、設定するスニペットのコードを作ります。
スニペットは「呼び出す名前 : 展開するコード」を対にして書きます。
"@in": "@include |;",
"@ib": "@include inline-block;",
"@op": "@include opacity(${1:0});"- 「|」は、展開したときのカーソル位置です。
- 「opacity(${1:0})」のように、「1:」をつけて{}で囲っておくと、囲ったテキストを選択した状態で展開されます。
- 複数登録する場合はカンマで区切ります。
スニペットを登録する
作ったスニペットを設定ファイルに登録します。
Dreamweaver
以下の場所にある設定ファイル「snippets.js」を開きます。（編集する前にバックアップを取っておくことをおすすめします）
■ Windows
C:/Users/ユーザ名/AppData/Roaming/Adobe/Dreamweaver バージョン/ja_JP/Configuration/Commands/Emmet/snippets.js
■ Mac
/Users/ユーザ名/Library/Application Support/Adobe/Dreamweaver バージョン/ja_JP/Configuration/Commands/Emmet/snippets.js
12行目、「”snippets”: {」の記述の後ろあたりに作ったスニペットを貼付けて保存します。
emmet.require('bootstrap').loadSystemSnippets({
"variables": {
"lang": "ja",
"locale": "ja-JP",
"charset": "UTF-8",
"indentation":"\t",
"newline":"\n"
},
"css": {
"filters": "html",
"snippets": {
//ここから
"@in": "@include |;",
"@ib": "@include inline-block;",
"@op": "@include opacity(${1:0});",
//ここまでを追加した
"@i": "@import url(|);",
"@import": "@import url(|);",
"@m": "@media ${1:screen} {\n\t|\n}",ちなみに上記はCSSのスニペットに限ります。
htmlのスニペットの場合は、600行目あたりの「”abbreviations”: {」のあとに追加します。下記のように短縮して書くこともできます！
"abbreviations": {
//ここから
"paging": ".pagination>.wp-pagenavi>span.previouspostslink{<}+span.current+a[href=#]*4+span.nextpostslink{>}",
//ここまでを追加した
"!": "html:5",
"a": "<a href=\"\">",
"a:link": "<a href=\"http://|\">",
"a:mail": "<a href=\"mailto:|\">",
"abbr": "<abbr title=\"\">",SublimeText2
SublimeText2にはユーザーのオリジナルのスニペット用のファイルが用意されています。
メニューから以下の通り進み、「Emmet.sublime-settings」を開きます。
「Sublime Text」>「Preferences」>「Package settings」>「Emmet」>「Settings – User」
設定前は真っ白だと思うので、下のコードをコピーして適宜変更して保存してください。
「”html”: {…」の方にはhtml用のスニペット、「”css”: {…」の方にはCSS用のスニペットを記述します。
{
"snippets": {
"html": {
"abbreviations": {
//ここから
"paging": ".pagination>.wp-pagenavi>span.previouspostslink{<}+span.current+a[href=#]*4+span.nextpostslink{>}"
//ここまで
}
},
"css": {
"snippets": {
//ここから
"@in": "@include |;",
"@ib": "@include inline-block;",
"@op": "@include opacity(${1:0});"
//ここまで
}
}
}
}スニペットを呼び出す
あとは付けた名前のあとで展開すれば押せばOKです！
呼び出し方はどちらのソフトでも同じです。
展開するコマンドはデフォルトだと以下の通りです。
Windows：Ctrl+EまたはTab
Mac：cmd+EまたはTab
■展開例その1
これでmixinを3文字で呼び出せます！
@ib
↓
@include inline-block;■展開例その2
こんな長めのコードが、たったの6文字に
paging
↓
<div class="pagination">
<div class="wp-pagenavi">
<span class="previouspostslink"><</span>
<span class="current"></span>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<span class="nextpostslink">></span>
</div>
</div>おまけ：Compassのmixinのスニペット
ずぼらな私がなるべく覚えやすくて短い単語で、なおかつかぶらないように作ったスニペットでございます…
※「Appearance」や「Box」など、使わないmixinは省いています。
clearfixは普段mixinではなくextendを使っているので、そちらに合わせています。
名前や値などなど、各々使いやすいようにカスタマイズしてくださいー！
"@ex": "@extend |;",
"@in": "@include |;",
"@cf": "@extend %clearfix;",
"@bgc": "@background-clip(padding-box);",
"@bgo": "@background-origin(border-box);",
"@bgs": "@background-size(cover);",
"@br": "@include border-radius(${1:50%});",
"@bs": "@include box-shadow(0 0 10px 0 rgba(0,0,0,0.1));",
"@bb": "@include box-sizing(border-box);",
"@fi": "@include filter(${1:blur(10px)});",
"@lg": "@include background-image(linear-gradient(top,#fff,#ccc));",
"@ib": "@include inline-block;",
"@op": "@include opacity(${1:0});",
"@ts": "@include text-shadow(0 1px 0 rgba(0,0,0,0.1));",
"@tf": "@include transform(${1:scaleY(-1)});",
"@tr": "@include transition(all 0.${1:3}s ease);",まとめ
毎回必ず使うようなオリジナルのmixinも登録すると便利！
DreamweaverとSublimeText2でのやり方のみ紹介しましたが、他のソフトでもEmmetが使えれば同じようなやり方で出来ると思います。
デフォルトのコードを見ながら試行錯誤で作ったスニペットなので、もっといい書き方がある気がします…あまり情報が見つからず…
もっと便利に使える書き方があればぜひ教えてください！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
