Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

Awesome Emmet Snippets.

4.15.2014

Emmet is an add-on for a stunning number of applications (Sublime Text, Brackets, Eclipse and some website too) which enables text-expanding shortcuts to make short work of the tedious and repetitive typing of front-end development. Here are a few Emmet snippets to demonstrate the awesomeness:

ul>li{item$}*3

Expands into:

    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>

Emmet's syntax is very similar to that of CSS: > drills inside an element. Also, elements can be multiplied with *.

h3+dl>(dt>kbd^dd)*3

Expands into:

    <h3></h3>
    <dl>
      <dt><kbd></kbd></dt>
      <dd></dd>
      <dt><kbd></kbd></dt>
      <dd></dd>
      <dt><kbd></kbd></dt>
      <dd></dd>
    </dl>

+ is for neighboring elements, and ^ goes up an element.

ul>li(>h4+img[src=http://placekitten.com/100/100?image=$]+p)*5

Expands into:

    <ul>
      <li>
        <h4></h4>
        <img src="http://placekitten.com/100/100?image=1" alt="">
        <p></p>
      </li>
      <li>
        <h4></h4>
        <img src="http://placekitten.com/100/100?image=2" alt="">
        <p></p>
      </li>
      <li>
        <h4></h4>
        <img src="http://placekitten.com/100/100?image=3" alt="">
        <p></p>
      </li>
      <li>
        <h4></h4>
        <img src="http://placekitten.com/100/100?image=4" alt="">
        <p></p>
      </li>
      <li>
        <h4></h4>
        <img src="http://placekitten.com/100/100?image=5" alt="">
        <p></p>
      </li>
    </ul>

As with CSS, [] is for attributes. $ will increment by one each time it's used.

Pretty cool. Emmet provides such an increase in development speed that I don't even have think about setting up a HAML environment.

Permalink

Tags: sublime-text tooling

Authorized users may log-in to leave a comment.

Last Blog: Job Search - The Numbers.

Next Blog: Environment Syncing for Sublime Text 3.