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
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
b turns into
bottom, and not
border, it happens because the properties
left, 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:r → position: relative pr → padding-right:
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,
w10 → width: 10px (ага, Pixels were added automatically)
- Negative values are also supported:
ml-10 → margin-left: -10px
- If you put a dot anywhere in the abbreviation, Hayaku will assume that you need em. For example,
w10.5 → width: 10.5em
- The abbreviation for percentages 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 the decoding of colors in the abbreviation. There are several ways to indicate what you mean by color:
c0 → color: #000 cF → color: #FFF (Use uppercase to tell Hayaku to decode this as color) cFA → color: #FAFAFA c#fa → color: #FAFAFA (Upper case is not required if you use#)
Simply convenient feature – add
!after the abbreviation to get
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:
w → width: |100% (| - carriage) h → height: |100% c → color: |#FFF etc...
Another feature that allows you to first write a property, and then use the autocompletion for values.
po → position: (Now you can write the value. For example, if you type a, Hayaku will prompt you for the value absolute) po → position: a| → position: absolute
It is also supported for values of units and colors.
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