- PVSM.RU - https://www.pvsm.ru -
Hayaku [1] это сборник полезных скриптов, помогающих при быстрой веб-разработке.
Hayaku предоставляет способ быстрого способ написания и поддержки CSS кода в редакторе. К сожалению, он пока доступен лишь для Sublime Text 2 [2], поддержка других редакторов ожидается позднее.
Preferences → Package Control (CTRL+SHIFT+P) → Install Package → Hayaku
Перезапускаем Sublime Text 2.
Если вы работали с 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 (ага, пиксели добавились автоматически)
w10.5 → width: 10.5em
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
после расшифровки:
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
Поддерживается в том числе и для значений единиц и цветов.
Ещё одна приятная фишка:
// → /* */
Конечно, вы можете сказать, что вам не требуется писать CSS быстрее, вы и так используете препроцессор CSS:) Препроцессоры серьёзно повышают скорость и читабельность кода, но вам по прежнему надо писать все эти чертовы лишние символы! К счастью, Hayaku легко работает с препроцессорами Sass, Less, Stylus, и т.д.
Удачной верстки!
Автор: XimikS
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/web-razrabotka/20955
Ссылки в тексте:
[1] Hayaku: https://github.com/hayaku/hayaku
[2] Sublime Text 2: http://www.sublimetext.com/2
[3] Источник: http://habrahabr.ru/post/160057/
Нажмите здесь для печати.