Pull to refresh

Потомок Zen Coding — Emmet for ST2!

Lumber room
Awaiting invitation
image
Эта статья будет полезна верстальщикам, использующим в качестве своего основного инструмента Sublime Text 2 и другим, кто хочет ускорить, улучшить и упростить себе жизнь. Речь пойдет о модификации плагина Zen Coding, а именно Emmet.

Буквально неделю назад в ленте твиттера промелькнула пара твитов об Emmet. После твита Вадима Макеева новость меня заинтересовала, т.к. я активно использую Zen Coding.
Надеюсь, что читатель знаком с Zen Coding, поэтому ближе к делу. (Линк на ZC, если последнее предположение ошибочно)

В чем, собственно, отличие от ZC?

  • Можно писать значения для свойств CSS прямо за аббревиатурами: p10 > padding: 10px, m0.5-10--15 > margin: 0.5em 10px -15px, w100p > width: 100%. Для целых значений автоматически подставляется px, а для значений с плавающей запятой — em.
  • Минус перед аббревиатурой раскроет свойство с добавлением браузерных префиксов. Например: bdrs создаст свойство border-radius, но -bdrs создаст список свойств с webkit, moz, ms и o префиксами.
  • Генератор градиентов: определите градиент (linear-gradient(...) или проще lg(...)) в качестве значения для любого CSS-свойства, нажмите Tab и получите список с определениями градиентов с учетом браузерных префиксов и особенностей реализации в более ранних версиях браузеров.
  • Неизвестные аббревиатуры не раскрываются в HTML-тэги (например, foo > <foo></foo>), а также, в CSS-коде: foo > foo: ;.


И это еще не всё!

  • Хорошие новости для любителей БЭМ! В Emmet добавлены фичи и для вас! Я не использую БЭМ, поэтому разбираться не стал. Подробнее о поддержке БЭМ в Emmet читайте здесь.
  • В Emmet присутствует генератор «рыбы» Lorem Ipsum. Для генерации можно использовать слова lorem и lipsum. Если текста мало, вы можете вручную задать количество слов в «рыбе», написав loremNN, где NN — число от 8 до ваших потребностей. Не думаю, что может понадобиться «рыба» более 1000 слов.
  • Неявные теги: вам больше не придется писать все теги для каких-то довольно стандартных конструкций, плагин определит их самостоятельно, полагаясь на тег-родитель. Попробуйте раскрыть эти конструкции: .header>.nav^.logo, .header>.wrap>.nav^^.logo и сразу всё поймете.
  • Появился новый оператор: ^. Он позволяет подняться на уровень выше при написании конструкций вида: .header>.nav^.logo или .header>.wrap>.nav^^.logo
  • Возможность расширения позволяет вам добавлять свои экшены и фильтры или настраивать существующие. Вы можете в файле Emmet.sublime-settings определить параметр extensions_path и Emmet будет подгружать все .js и .json файлы автоматически при запуске ST2.


Нюансы

Теперь некоторые тонкости.
Во-первых, Emmet существует только для ST2, в отличие от Zen Coding, который написан под большее количество редакторов кода.
Во-вторых, плагин еще тестируется и если найдете какие-либо баги, не стесняйтесь — отписывайтесь в issue на Гитхабе или в твиттер автору плагина.

Итог

А в остальном, Emmet просто замечателен по умолчанию, т.к. является продолжением концепции Zen Coding. Выражаю благодарность всем, кто причастен к разработке ZC и Emmet!
Если еще не пробовали, советую начать прямо сейчас! И помните, оставляя фидбэки автору плагина, вы помогаете улучшать любимый продукт!

Скачать Emmet!
Tags:
Hubs:
You can’t comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.