Sublimetext2でCSSを高速に書けるhayakuを紹介
よく読まれている記事
sublimetext2の「hayaku」というパッケージが、思った以上に快適で、もはや無くてはならないpackageになったのでご紹介します。
hayakuを利用した直感的なCSSコーディング
どれくらい直感的にコーディングができるか、ほんの一例をご紹介します。入力に決まりはありません。
雰囲気でキーを打ってtabを押すだけでCSSが自動補完されます。
例えば、text の align の center なので、txc、もしくは、txecなどを入れてtabを押すと、
txc
|
1 |
text-align: center; |
box-sizing: border-box;を入れたいから、boxsizingのborder-boxだから、なんとなく、bsizbとか入れてtabを押すと、ベンダープレフィックスまで自動で入れてくれます。
bsizb
|
1 2 3 |
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; |
position: relative;を入れたいから、poreとか。
pore
|
1 |
position: relative; |
m10
|
1 |
margin: 10px; |
bs
|
1 2 |
-webkit-box-shadow: #FFF; box-shadow: #FFF; |
bs8
|
1 2 |
-webkit-box-shadow: #888; box-shadow: #888; |
t10
|
1 |
top: 10px; |
lh1.5
|
1 |
line-height: 1.5; |
fs13
|
1 |
font-size: 13px; |
ほんと入力する文字は、感覚でいいんです。
bgu
|
1 |
background: url(); |
tsd
|
1 |
text-shadow: ; |
wbba
|
1 2 |
-ms-word-break: break-all; word-break: break-all; |
cup
|
1 |
cursor: pointer; |
bo
|
1 |
border: 1px solid; |
op0.8
|
1 |
opacity: 0.8; |
co2
|
1 |
color: #222; |
co21
|
1 |
color: #212121; |
感覚でこんな感じーで保管されちゃう。
he300
|
1 |
height: 300px; |
wi100
|
1 |
width: 100px; |
bor5
|
1 2 |
-webkit-border-radius: 5px; border-radius: 5px; |
どうでしょうか。雰囲気で入力してtabを押すだけで、CSSのコードが補完されます。
hayakuを利用して色をコピーする
コピーした色をそのまま利用できる機能が便利です。先にcolorでb7b7b7をコピーしておいて、bgcでtabを押すと、
|
1 |
background-color: #b7b7b7; |
が出てくる。
あとはこれの応用。
colorでb7b7b7をコピーしていて、bdcなら
|
1 |
border-color: #b7b7b7; |
hayaku すごいですね！
他に見つけたら追記していきます。
Zen-CodingやEmmetを利用していない人でも、hayakuは入れて損はないかと思います。