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;
К сожалению, эта фича ещё очень сырая, поддерживаются только -webkit- префиксы, и нет поддержки градиентов.
Некоторые значения по умолчанию
Если вы напишете только свойство (по мнению Hayaku), то 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, и т.д.
Удачной верстки!
Автор: XimikS
