Hayaku - Writing CSS Faster

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

Hayaku provides a quick way to write and maintain CSS code in an editor. Unfortunately, it is only available 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 have worked with Sublime Text 2, then you are probably familiar with its fuzzy search function. It implements about the same thing, but for CSS. Typing wi, and then clicking TAB, you get width. The same result will be if you type wid or wdt - this is a fuzzy search :) For most properties, the abbreviations are very short and consist of a couple of letters, but you can print as many letters from the property name as you want, Hayaku can handle it.
Sometimes it may seem to you that Hayaku does not completely decipher your abbreviations, for example, it b turns into bottom, and not backgroundor border, this is because properties left, right, top, bottomhave the highest priority.

Smart abbreviations

You can write your abbreviation as 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 magic of fuzziness in action :) If you really want to use the separator in this abbreviation - add a colon between the property and value, the result will not change. However, the use of a colon still makes sense in some cases: for example, use prcan be construed as padding-right, and adding a colon between them can eliminate ambiguity; paddingdoes not accept any values ​​starting with r, therefore, we skip this option, and move 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 instance,
  

  w10 → width: 10px (ага, пиксели добавились автоматически)
  

• Negative values ​​are also supported:
  

  ml-10 →  margin-left: -10px
  

  
  
• If you put an end somewhere in the abbreviation, Hayaku will assume that you need em. For instance,
  

  w10.5 → width: 10.5em
  

• The abbreviation for percent is 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 color decoding in the abbreviation. There are several ways to indicate what you mean by color:

c0 → color: #000
cF → color: #FFF (Используйте верхний регистр, чтобы сказать Hayaku расшифровывать это как цвет)
cFA → color: #FAFAFA
c#fa → color: #FAFAFA (Верхний регистр не требуется, если вы используете #)

! Important modifier

Just a convenient feature - add !after the abbreviation to get !importantafter decryption:

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 next versions it will be possible to redefine such things through the settings of Sublime Text 2.

Some defaults

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

w →  width: |100% (| - каретка)
h → height: |100%
c →  color: |#FFF
etc...

Post-expansion of values

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

po →  position: (Теперь вы можете писать значение. Например, если вы напечатаете a, Hayaku предложит авдополнение значением absolute)
po →  position: a| →  position: absolute

It is also supported for unit and color values.

Inline comments

Another nice trick:

// →  /*  */

Using Hayaku with preprocessors.

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

Adding curly braces to a shortcut

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

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