作業環境
OS: ubuntu
Editor: atom
Emmetの省略記法
Emmetの省略記法を使うときにちょいちょいどう書けばいいのか直観的にわからないことがあるので、ちょっとまとめてみた。
font-size
font-sizeを期待してfsを展開するとfont-styleになる。
- fs > font-style
font-sizeはfx
- fx > font-size
- fx10 > font-size: 10px;
box-shadow
box-shadowはbsではなくbxs
- bs > border-style
- bxs > box-shadow
border
borderはboではなくbd
- bo > background-origin
- bd10 > border: 10px;
ちなみにbd+
- bd+ > border: 1px solid #000
で一発で枠線が引けるので憶えておくと便利かもしれない。
border-radius
brは
- br => border-rightなので
border-radiusは
- bdrs => border-radius
若干めんどうな形
list-style:none
自分はほぼ毎回使うlist-style:none
- ln => letter-spacing: normal
list-style: noneは
- lin => list-style:none
これは予想がつくけど、よく使うだけに意識し憶えとかないとついうっかりlnと打ってしまう。
感想
こういった機能は手軽だからうまくいかなくても直接入力して済んでしまう。そのせいでぼんやり気になってても後回しになってたので一回軽くまとめて調べてみた。
emmetについてまだよく知らないから環境やエディタによって微妙に違ったりすることがあるのかもしれないけど参考までに。