Hayaku - write CSS faster

Hayaku is a collection of useful scripts to help with rapid web development.

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

Installation

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

Opportunities

Fuzzy CSS property abbreviations

If you worked with Sublime Text 2, then you are probably familiar with its fuzzy search function. Here is implemented about the same, but for CSS. Typing wi , and then pressing TAB , you get the width . The same result will be if you type wid or wdt - this is a fuzzy search :) For most properties, abbreviations are very short and consist of a couple of letters, but you can type 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 decode your abbreviations, for example, b turns into bottom , not background or border , this happens because the properties left, right, top, bottom have the highest priority.
')

Clever abbreviations

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

 p:r → position: relative pr → padding-right: 

Numbers in abbreviations

Hayaku understands many ways to write abbreviations with numbers

• You can simply write the number after the abbreviation to use it as a value. For example,
  

   w10 → width: 10px (,   ) 

• Negative values ​​are also supported:
  

   ml-10 → margin-left: -10px 

  
  
• If you put a dot somewhere in the abbreviation, Hayaku will assume that you need em. For example,
  

   w10.5 → width: 10.5em 

• Abbreviation for percent - percents, for example:
  

   w10percents = w10perc = w10p → width: 10% 

• The remaining units are also supported, for example:
  

   h2pt → height: 2pt w10h → width: 10vh 

Colors in abbreviations

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

 c0 → color: #000 cF → color: #FFF (  ,   Hayaku    ) cFA → color: #FAFAFA c#fa → color: #FAFAFA (   ,    #) 

Modifier! Important

Just a handy feature - add ! after the abbreviation to get !important after 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 closest versions it will be possible to override such things through the settings of Sublime Text 2.

Some default values

If you write only a property, then Hayaku inserts a default value, and moves the cursor inside it, allowing you to continue writing your value. For example:

 w → width: |100% (| - ) h → height: |100% c → color: |#FFF etc... 

Post-disclosure of values

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

 po → position: (    . ,    a, Hayaku    absolute) po → position: a| → position: absolute 

Supported including for unit values ​​and colors.

Inline comments

Another nice feature:

 // → /* */ 

Use Hayaku with preprocessors.

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

Adding curly braces to shortcuts

CTRL + ENTER after writing the selector will automatically create curly braces and move the cursor inside the selector. (@CyberAP)
Have a nice layout!

UPD: As it turned out, the authors of Hayaku are habraks kizu and TheBits