Пишем CSS быстрее — Hayaky

Sublime Text — замечательный редактор кода. Мне он нравиться тем что в нем есть все современные фишки, которые ускоряют работу при написании кода. Только я привык к zen-coding, как обнаружил новую фишку — Hayaku.

Hayaku — это плагин для Sublimetext который позволяет более быстро писать css код. Работает он на основе нечеткого поиска. Например чтобы написать «font-size=14px» достаточно набрать «fz14». Использование вот таких вот сокращений позволяет повысить скорость работы.

Установка

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 имеют наивысший приоритет.

Подробную статью про Hayaku и его применении лучше прочитать на хабре.

Приведу список сокращений котрыми я выбрал для себя и начал использовать:

bgig
bgrt
bgpt
w1250
h100
ha = height auto
db = display block
fll = float left
fz = font-size
lh = liine-height
fw = font-weight
fz14 = font-size:14px;
lh = lineheight

Вот так просто. Теперь я использую Less css, Hayku и Zen-coding. И всё балгодаря Sublime Text.

UPD 07.09.2013

Проблема с less в Hayaku в Sublime text 2

Установил заново Sublime и Hayaku и заметил что при работе с Less Hayaku перестал по сочетанию Ctrl + Enter создавать блок для кода { }. И также теперь в less вместо быстрых свойств — мне начали выдаваться какие-то сниппеты. В общем hayaku в нем работать перестал. А ведь это было очень удобно. Чтобы исправить это нужно добвать поддержку расширения .less в hayaku. Делаем следующее.

Идем в C:UsersИмя_вашего_пользователяAppDataRoamingSublime Text 2PackagesHayaku — tools for writing CSS fastercontexts.py

В contexts.py на 29-й и на 97-й строке дописываем расширение «source.less».

Выглядеть это будет вот так:

Проблема с less в Hayaku Sublime Text 2