Перейти к содержимому


- - - - -

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


  • Авторизуйтесь для ответа в теме
В теме одно сообщение

#1 Гость_F1rst_*


  • Гости
  • Репутация
    0

Отправлено 25 Ноябрь 2012 - 21:04

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

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


Установка

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 после написания селектора автоматически создаст фигурные скобки и перенесёт курсор внутри селектора. (<a class="user_link" href="habrahabr.ru/...users/cyberap/" style="margin: 0px; padding: 0px 0px 0px 14px; border: 0px; font-size: 12px; vertical-align: baseline; outline: 0px; color: rgb(153, 0, 153); line-height: 1.5em; font-family: arial; background-image: url(habrahabr.ru/i/bg-user2.gif); background-position: 0px 60%; background-repeat: no-repeat no-repeat;">CyberAP)
Удачной верстки!

авторы Hayaku kizu и TheBits

[offtop]P.S не знал где создать тему,если создал не там то переместите))[/offtop]

#2 Оффлайн   ๖ۣۣۜDesperate™

    Администратор


  • Администраторы
  • Репутация
    4 647
    • Cообщений: 8 621
    • Форум:3.4.х
    • Город:IpbZona
    Участник

Отправлено 25 Ноябрь 2012 - 21:08

Про кликабельные ссылки не забываем!
  • 0