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!