【Sublime Text】簡単フォントサイズ指定【Emmet】

EmmetとMacroを利用した簡単フォントサイズ指定

事情によりcss直書きを強いられ、Sass,Lessなどが使えない場合に便利です。
これから紹介するのは%による相対指定の場合です。
（Sublime Text2で動作を確認していますが、3でも同様のことが出来るんじゃないかと思います。）

Howto

前提としてEmmetが必要なのでPackage Control:Install PackageでEmmetをインストールしてください。
これから解説するマクロを導入することで、ちょこっと入力してショートカットキー押すだけで面倒くさいことが捗ります。

Macro

easy_fontsize.sublime-macro

[
	{
		"args":
		{
			"characters": "*1"
		},
		"command": "insert"
	},
	{
		"args":
		{
			"characters": "00"
		},
		"command": "insert"
	},
	{
		"args":
		{
			"action": "evaluate_math_expression"
		},
		"command": "run_emmet_action"
	},
	{
		"args":
		{
			"characters": "\\"
		},
		"command": "insert"
	},
	{
		"args":
		{
			"characters": "1"
		},
		"command": "insert"
	},
	{
		"args":
		{
			"action": "evaluate_math_expression"
		},
		"command": "run_emmet_action"
	},
	{
		"args":
		{
			"characters": "%"
		},
		"command": "insert"
	}
]

これを拡張子.sublime-macroで保存してC:\Users\ユーザー名\AppData\Roaming\Sublime Text バージョン\Packages\Userに入れます。（Windowsの場合）
これで、Tool > Macrosからeasy_fontsizeコマンドを実行出来るようになりますが、せっかくなのでついでにショートカットキーも設定しましょう。

Keymap

Default(Windows).sublime-keymap

{
    "keys": ["ctrl+alt+f"], "command": "run_macro_file", "args": {
        "file": "Packages/User/easy_fontsize.sublime-macro"
    }
}

Preferences > Key Bindings - User に上記のコードを登録します。
ショートカットキーはお好みで変更してください。

ここからは、具体的な使い方の説明に移ります。
まずはCSSを開いたら、font-sizeを指定したいところで、fzと入力してexpandします。（ctrl+e）
画面上ではfont-size: ;が表示されるはずです
そうしたら（目的のフォントサイズ）/（ベースとなるフォントサイズ）とスラッシュを挟んで入力してください。

CSS

test.css

.test {
	font-size: 18/14|;
}

この場合は18pxが目的のフォントサイズ、14pxがベースとなるフォントサイズです。
ここまで入力したらコード内の|の位置で、先ほどショートカットとして登録したctrl+alt+fを押します。
※|は実際に入力する必要はありません。

test.css

.test {
	font-size: 129%;
}

このように変換されます。
Emmetの演算機能を使って実装しています。

元々はEmmetのsnippets.jsonにfz+なるものを追加し、計算式ごと登録してたりしたんですが、あんまりスニペットとして組み込む恩恵がなかったので、Macroで処理したほうがいいじゃんという結論に至りました。
コーディングで頻繁に出てくるフォントサイズの計算に活用して頂ければ幸いです。