Hayaku – Write CSS faster

Hayaku is a collection of useful scripts that help with fast web development.

Hayaku provides a way to quickly write and support CSS code in the editor. Unfortunately, it is still only available for Sublime Text 2, support for other editors is expected later.


Preferences → Package Control (CTRL + SHIFT + P) → Install Package → Hayaku
Restart Sublime Text 2.



Fuzzy abbreviations of CSS properties

If you worked with Sublime Text 2, you are probably familiar with its fuzzy search function. This is about the same, but for CSS. By typing wi, and then clicking TAB, you will receive width. The same result will be if you type wid or wdt – it’s a fuzzy search 🙂 For most properties, the abbreviations are quite short, and consist of a pair of letters, but you can print as many letters from the property name as you want, Hayaku will cope.
Sometimes it may seem to you that Hayaku does not quite correctly decipher your abbreviations, for example, it turns into bottom, and not backgroundor border, it happens because the propertiesleft, right, top, bottomhave the highest priority.

Clever value reduction

You can write down your abbreviation as a property + value, but you do not need to use any delimiters between them. For example: por(or pore, posrel, etc) will turn into position:relative. Again, the magic of fuzziness in action 🙂 If you really want to use a delimiter in this abbreviation – add a colon between the property and the value, the result will not change. However, the use of the colon still makes sense in some cases: for example, use prcan be interpreted as padding-right, and adding a colon between them can eliminate ambiguity; paddingDoes not take any values ​​starting with r, therefore, skip this option, and go further:

p:rposition: relative


Figures in abbreviations

Hayaku understands many ways of writing abbreviations with numbers

  • You can simply write a number after the abbreviation to use it as a value. For example,
    w10width: 10px (ага, Pixels were added automatically)
  • Negative values ​​are also supported:
    ml-10margin-left: -10px
  • If you put a dot anywhere in the abbreviation, Hayaku will assume that you need em. For example,
    w10.5width: 10.5em
  • The abbreviation for percentages is percents, for example:
    w10percents = w10perc = w10pwidth: 10%
  • The remaining units are also supported, for example:
    h2ptheight: 2pt
    w10hwidth: 10vh


Colors in abbreviations

In addition to strings and numbers, Hayaku supports the decoding of colors in the abbreviation. There are several ways to indicate what you mean by color:

c0color: #000
cFcolor: #FFF (Use uppercase to tell Hayaku to decode this as color)
cFAcolor: #FAFAFA
c#facolor: #FAFAFA (Upper case is not required if you use#)


Modifier! Important

Simply convenient feature – add !after the abbreviation to get !importantafter decoding:

dn! →  display:none !important;


Automatic vendor prefixes.

Do you need vendor prefixes? Hayaku supports them too!

bra1.5-webkit-border-radius: 1.5em;
        border-radius: 1.5em;

For different properties, different prefixes are inserted. This is defined in the dictionary and in one of the nearest versions it will be possible to override these things through the settings of Sublime Text 2.

Some default values

If you just write a property, Hayaku will insert the default value, and move the cursor inside it, allowing you to continue writing your value. For example:

wwidth: |100% (| - carriage)
hheight: |100%
ccolor: |#FFF


Post-Expanding Values

Another feature that allows you to first write a property, and then use the autocompletion for values.

poposition: (Now you can write the value. For example, if you type a, Hayaku will prompt you for the value absolute)
poposition: a| →  position: absolute

It is also supported for values ​​of units and colors.

Inline comments

Another nice chip:

// →  /*  */


Using Hayaku along with preprocessors.

Of course, you can say that you do not need to write CSS faster, you already use a CSS preprocessor 🙂 Preprocessors seriously increase the speed and readability of the code, but you still need to write all these fucking superfluous characters! Fortunately, Hayaku easily works with the preprocessors Sass, Less, Stylus, etc.

Adding curly braces with shortcuts

CTRL + ENTER after writing the selector will automatically create curly braces and move the cursor inside the selector. Happy

Written by
Am a tech geek.. Do you wanna know more about me..? My contents will do tell you.

Have your say!

0 0

Lost Password

Please enter your username or email address. You will receive a link to create a new password via email.

Hayaku - Write CSS faster

by Ahmad
Turn up.. Let's be friends on social networks also