Hayaku — пишем CSS быстрее

Hayaku это сборник полезных скриптов, помогающих при быстрой веб-разработке.

Hayaku предоставляет способ быстрого способ написания и поддержки CSS кода в редакторе. К сожалению, он пока доступен лишь для Sublime Text 2, поддержка других редакторов ожидается позднее.

Установка

Preferences → Package Control (CTRL+SHIFT+P) → Install Package → Hayaku
Перезапускаем Sublime Text 2.

Возможности

Нечеткие аббревиатуры CSS свойств

Если вы работали с Sublime Text 2, то наверняка знакомы с его функцией нечеткого поиска. Здесь реализовано примерно то же самое, но для CSS. Напечатав wi, а потом нажав TAB, вы получите width. Тот же самый результат будет, если вы напечатаете wid или wdt — это же нечеткий поиск :) Для большинства свойств сокращения весьма короткие, и состоят из пары букв, но вы можете напечатать столько букв из названия свойства, столько хотите, Hayaku справится.
Иногда вам может показаться, что Hayaku не совсем правильно расшифровывает ваши аббревиатуры, например, b превращается в bottom, а не background или border, это происходит потому, что свойства left, right, top, bottom имеют наивысший приоритет.

Умные сокращения значений

Вы можете записать вашу аббревиатуру как свойство + значение, но не требуется использовать никакие разделители между ними. Например: por (или pore, posrel, и т.д) превратится в position:relative. Опять таки, магия нечеткости в действии :) Если вам так уж хочется использовать разделитель в этой аббревиатуре — добавьте двоеточие между свойством и значением, результат не изменится. Однако, использование двоеточия все же имеет смысл в некоторых случаях: например использование pr может быть истолковано как padding-right, а добавление двоеточия между ними может устранить двусмысленность; padding не принимает никаких значений, начинающихся на r, следовательно, пропускаем этот вариант, и идем дальше:

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

Цифры в сокращениях

Hayaku понимает много способов написания аббревиатур с цифрами

• Вы можете просто написать число после аббревиатуры, чтобы использовать его как значение. Например,
  

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

• Отрицательные значения тоже поддерживаются:
  

  ml-10 →  margin-left: -10px
  

  
  
• Если вы поставите точку где-нибудь в аббревиатуре, Hayaku будет считать, что вам нужен em. Например,
  

  w10.5 → width: 10.5em
  

• Аббревиатура для процентов — percents, например:
  

  w10percents = w10perc = w10p →  width: 10%
  

• Остальные единицы тоже поддерживаются, например:
  

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

Цвета в сокращениях

Помимо строк и чисел, Hayaku поддерживает расшифровку цветов в аббревиатуре. Есть несколько способов указать, что вы имеете в виду цвет:

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

Модификатор !important

Просто удобная фича — добавьте ! после аббревиатуры, чтобы получить !important после расшифровки:

dn! →  display:none !important;

Автоматические вендорные префиксы.

Вам нужны вендорные префиксы? Hayaku поддерживает и их!

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

Для разных свойств вставляются разные префиксы. Это определяется в словаре и в одной из ближайших версий будет возможность переопределять подобные вещи через настройки Sublime Text 2.

Некоторые значения по умолчанию

Если вы напишете только свойство, то Hayaku вставит значение по умолчанию, и перенесет курсор внутрь него, позволяя вам продолжить написание своего значения. Например:

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

Пост-раскрытие значений

Ещё одная фишка, позволяющая вам вначале написать свойство, а потом использовать авдополнение для значений.

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

Поддерживается в том числе и для значений единиц и цветов.

Inline комментарии

Ещё одна приятная фишка:

// →  /*  */

Использование Hayaku вместе с препроцессорами.

Конечно, вы можете сказать, что вам не требуется писать CSS быстрее, вы и так используете препроцессор CSS:) Препроцессоры серьёзно повышают скорость и читабельность кода, но вам по прежнему надо писать все эти чертовы лишние символы! К счастью, Hayaku легко работает с препроцессорами Sass, Less, Stylus, и т.д.

Добавление фигурных скобок шорткатом

CTRL + ENTER после написания селектора автоматически создаст фигурные скобки и перенесёт курсор внутри селектора. (@CyberAP)
Удачной верстки!

UPD: Как оказалось, авторы Hayaku — хабралюди kizu и TheBits