いまさらながらEmmetを使ってみる。

最近HTML+CSSをよく書くので、そろそろタグやらクラスやらを書くのが面倒になってきた。

反抗期。ふぃふぃです。。

下記サイトを参考にしました。
ありがとうございます。

Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫 | WEB EGG

sublime Text3でEmmetのプラグインをインストール。

• Emmetを使うためのショートカット
  • Ctrl + e

ダミーテキストの生成

ul>li*2>lorem3

<ul>
    <li>Lorem ipsum dolor.</li>
    <li>Illo, quis, laborum.</li>
</ul>

ul>li*2>lorem10

<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, officia!</li>
    <li>Perspiciatis, qui id deserunt tenetur praesentium sint dolores doloremque iure.</li>
</ul>

感動。(涙)
いままでコピペばっかりしていた自分が馬鹿みたいじゃないか---!!!
ありがとうEmmet。

たとえばBootstrapで2カラムのひな形を、一行で書いてみる。

.container>.row>.col-sm-7>convas#panel[width=470 height=290]+.col-sm-5>.well.well-smColor>h3.page-header{Color palette}+table.table.table-striped.table-hover.monospace#color-palette>tbody

<div class="container">
    <div class="row">
        <div class="col-sm-7">
            <convas id="panel" width="470" height="290"></convas>
            <div class="col-sm-5">
                <div class="well well-smColor">
                    <h3 class="page-header">Color palette</h3>
                    <table class="table table-striped table-hover monospace" id="color-palette">
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>