We code the web

Faster CSS coding with Hayaku

User avatar Niels Gerritsen  ·  Jun 17, 2015 June 17, 2015

Lately a good friend of mine showed me this plugin for Sublime Text called Hayaku. I had never heard of it so I asked him what it was. It’s like Emmet for CSS. Hey, I know Emmet, it makes writing HTML and CSS easier, so what’s this about?

So Hayaku is a plugin for Sublime Text and it’s very cool. It is actually a tad bit different from Emmet, it is more of a fuzzy auto completer. You can write abbreviations for CSS rules, press tab, and Hayaku will try to guess what you ment, some examples:

.cool-class {
    /* bb */
    border-bottom: ;

    /* fs12 */
    font-size: 12px;

    /* fweib or fwb */
    font-weight: bold;

    /* c */
    color: #FFF;

    /* bra2 */
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

As you can see it also is able to derive values from your abbreviations. You have to play with it for a while. I noticed it did not resolve everything to the result I expected, but most of the times it’s right. It can also figure out different value types:

.even-cooler-class {
    /* mb20 */
    margin-bottom: 20px;

    /* mb20p */
    margin-bottom: 20%;

    /* mb20.0 */
    margin-bottom: 20.0em;

    /* mb20.0r */
    margin-bottom: 20.0rem;
}

Hey that’s pretty nice! Another cool feature is that it can also take advantage of what’s on your clipboard. Who didn’t copy paste HEX codes for colors from Photoshop or something else to their CSS/SASS?  I did do that, a lot. Let’s say you copied #3498db from flatuicolors.com, a nice shade of blue. Now remember how in the first example_ ‘c’ + tab_ resulted in a color with value ‘#FFF‘, let’s try that again:

.insane-test {
    /* c */
    color: #3498db;
}

Quite impressive, don’t you think? Hayaku has been polite and put the copied color there for us, as if it knows our habits.

As you can see a very nice tool, you can be more productive if you get the hang of it. It is currently only available for Sublime Text, but other IDE’s can provide similar functionalities.

Happy styling!

References:

Related posts

Using icon fonts with SASS

Sometimes you want to display an icon in your website somewhere, but you do not want to touch the HTML. For instance if you have an auto-generated link in your CMS and you want to prefix it with an icon. This is actually very easy to do, because that is exactly what icon font vendors like Bootstrap Glyphicons and FontAwesome already do!

React inline styles with Radium & TinyColor

CSS is an old standard. It’s pretty basic and there are currently a lot of alternatives for styling web applications. Of course we have the pre-processors like LESS and SASS. CSS Modules is also a nice one which I’ll probably cover in another post. In the end they all output plain CSS again, but ah well, what other options do you have? What about inline styles? In Javascript.. WHAT?!

Goodbye nested lists, hello SASS maps!

SASS lists are great, and with multidimensional lists you can get a key-value-like experience, but not completely..