Hayaku ^1.5.4

Hayaku is a bundle of useful scripts aiming for rapid front-end web development.

The main aim of Hayaku is to create the fastest way to write and maintain CSS code in an editor.

Table of Contents

1. Install Hayaku for Sublime Text

2. Features

   • Smart CSS Abbreviations
     • Fuzzy CSS property abbreviations
     • Smart CSS values abbreviations
     • Numeric values in abbreviations
     • Color values in abbreviations with RGBA values
     • Importance modifier
     • Default values
     • Clipboard defaults
   • Postexpands
     • Simple property postexpands
     • Postexpands for units
     • Postexpands for colors
     • Postexpand for importance
   • Creating new CSS rule blocks
   • Inline comments <br/><br/>
   • Value cycling ^new!
     • Supported value types
     • Basics
     • Key bindings

3. Settings and Preferences

   • User dictionaries ^new!
     • Syntax of user dictionaries
     • User dictionary overrides
   • User aliases ^new!
   • Using both dictionary and alias ^new!
   • Extra scopes for dictionaries and aliases
   • Autoguessing the code style
   • Single code style
   • Automatic new line after expand
   • Quotes and URLs
   • Units for unitless values
   • Prefixes options
     • The aligning for the prefixes
     • Using only specific prefixes
   • Options for colors
     • Colors' case
     • Shorthand colors <br/><br/>

4. Using Hayaku with CSS Preprocessors

5. License and copyrights

Install Hayaku for Sublime Text

Right now Hayaku is available only for Sublime Text (even for third version!), but when it would be complete, we would port it to some other editors.

Using Package Control:

1. Run Package Control: Install Package command
2. Search for Hayaku - tools for writing CSS faster (Hayaku should be enough) and wait for it to be installed
3. Restart Sublime Text (required to make default settings for different syntaxes to work)

Or manually, using git:

Clone repository into Packages directory (can be found using Preferences: Browse Packages command in Sublime Text)

git clone git://github.com/hayaku/hayaku.git

And then restart Sublime Text.

Note on autocomplete

Important: Hayaku disables the autocomplete for CSS by default. This was made to remove the ambiguosity and confusion that could happen when you'll see one result in autocomplete and would get something different on pressing tab.

You can restore the autocomplete by redefining the auto_complete_selector setting in your User/Preferences.sublime-settings to either the default value:

{
    "auto_complete_selector": "source - comment, meta.tag - punctuation.definition.tag.begin"
}

Or to anything other you'd like.

However, for CSS scopes this would only enable the autocompletes by enter, the tab autocomplete would still run the Hayaku when possible.

Features

Smart CSS Abbreviations

Hayaku is not your average snippet engine. Most of the CSS snippets to date are static — you need to remember all the abbreviations if you want to use them.

Hayaku offers a better and faster way: you don't need to remember anything, you can just try to write the shortest abbreviation for a thing you want to write in CSS — and Hayaku would try to guess it when you press tab.

There are a lot of things Hayaku can do in abbeviations, here are some of them:

Fuzzy CSS property abbreviations

This is the first basic thing: Hayaku don't have any premade snippets for CSS, it have a dictionary with a lot of CSS properties, so when you write some abrakadabra, it tries to parse it and guess what you meant. For most properties those abbreviations could be rather short, but you're not sticked to them: you can write as much letters for a property as you wish.

So, writing w, wi or wid would give you width. And don't forget about the fuzzy part: wdt and wdth would work too.

Sometimes you would guess that some abbreviations must become other things, but in most cases all the variants have some logic beyound. b could be expanded to background or border, but expanded to bottom instead — it's becouse all the “sides” values are abbreviated to just one letter: left, right, top, so bottom goes by this path.

However, if you feel that some abbreviation just need to be not that is expands to, feel free to fill up an issue.

Smart CSS values abbreviations

Here comes the second basic thing of Hayaku, the awesome one. You can expand abbreviations for the property+value parts, but you don't need to use any delimiters in those abbreviations! That's right — you can just write something like por and get position: relative!

This works also fuzzy, so to get position: relative you could use any number of letters: pore, posrel, pstnrltv etc. Also, if you want, you can still use a delimiter — just add a colon between the property and value and get the same result. So, if you want to stick to Zen style, use it — pos:r would work as intended. And p:r would work too — while pr would expand to padding-right, adding delimiter could help by removing ambiguity — padding can't have any values containing r, so hayaku falls to position.

Numeric values in abbreviations

Hayaku understands a lot of ways of writing numeric abbreviations.

• You can just write a number after abbreviation to treat it as a value: w10 would expand to width: 10px (see? automatic pixels!).

• Negative numbers supported too: ml-10 would expand to margin-left: -10px.

• If you'd write a dot somewhere in abbreviation, Hayaku would guess what you need ems, so w10.5 would expand to width: 10.5em.

• There are some abbreviations for some units, like percents for %, or . for em, so 100p would expand to 100% and 10. to 10em.

• All other units are supported, h2pt would expand to height:2pt and so on. Fuzzy guess is there too: if you'd want vh you could write just w10h and get width: 10vh.

Color values in abbreviations

Actually, you can not only expand strings and numbers, you can expand even colors using abbreviations! You can use different ways to achieve that (as anything in Hayaku), so just look at those examples:

• c0 → color: #000
• cF → color: #FFF (use uppercase to tell Hayaku it's a color)
• cFA → color: #FAFAFA
• c#fa → color: #FAFAFA (no need in uppercase if you use #)

And, of course, this works everywhere you would expect colors to work, so brc0 would expand to border-right-color: #000;

RGBA values

There is also a way to expand rgba values for colors — you can either use rgba's alpha after the dot, either use hexadecimal alpha after the full color, if you'd like. This would look like this:

• c0.5 → color: rgba(0,0,0,.5)
• cF.2 → color: rgba(255,255,255,.2)
• cABCD → color: rgba(170,187,204,0.87)
• cABC80 → color: rgba(170,187,204,0.5)

You can also write just the dot and get the placeholder on the alpha part of the rgba:

• cF00. → color: rgba(255,0,0,.[5])

Importance modifier

A nice little feature: add ! after abbreviation and get !important at the end. Not that importance is something you would want to use everyday, but still.

dn! would give you display:none !important;, yeah.

Automatic vendor prefixes

If you need some vendor prefixes, Hayaku could provide them!

bra1.5 would expand to this:

-webkit-border-radius: 1.5em;
        border-radius: 1.5em;

Right now there are no prefixes for values (like gradients etc.) but someday they'd be there.

Default values

If you'd write something that is only a property (as Hayaku would guess), Hayaku would insert a snippet with some default value already selected for you, so you could start writing your own value to replace it or to press tab again to keep it and move forward. So, writing w would actually expand to width: [100%] (braces mean that this value is selected by default).

Clipboard defaults

Aside from the normal defaults, Hayaku would try to use your clipboard for getting the value from it as the default value.

Right now it's available for colors and images urls:

• If you'd have color in hexadecimal, rgb(a) or hsl(a) in your clipboard, Hayaku would use it as a default shown value. That would work even is the value is hashless, so if you've copied 808080 fr