Emmet is AWESOME

emmet

While I thought it was great idea, I was not super crazy about HAML. Thanks to css and jquery, I always think DOM in css selectors. However, I just couldn’t stick with HAML. I liked to be able to code in html with < and >.

Meet Emmet.

Yes! Just like haml, you can write html with css selector, but you are coding in html. Let me show you what I mean. For example:

.row>.medium-3.small-6.columns.mycalss$*4>h3{Headline}+img[src="http://placehold.it/400x200"]+p>Lorem

Will produce

See the Pen plwIt by Daigo Fujiwara (@daigofuji) on CodePen

Amazing. $ for number, * to multiply, and lorem to put lorem ipsum in there. Awesome.

To install emmet on my sublime text 2, I have already had Package Manager installed on it, so all I had to do was run Package Control, which you could do by Menu > Tools > Command Pallete. Or hit Cmd+Shift+p. Type in install, select “Install Package.” Find Emmet, select. Done.

But what really sold me on Emmet was the “action” for comments. You can comment things with Command-/. Which works with both html and css (didn’t try with js, yet).

In css, m is margin, p is padding, bd for border, bg for background, etc. Great cheat sheet here.

Open a new file, save it as index.html, type ! and hit tab. Boom. HTML5 document is created. Crazy. I love it. Thanks Emmet!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">