Emmet

Решил я тут взяться за Emmet, это продолжатель Zen-Coding.

Хорошая штука в общем)

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

Горячие клавиши:

  • Tab or Ctrl+E - развершуть аббревиатуру
  • Ctrl+Alt+Enter - интерактивное использование Эммета
  • Ctrl+, (PC) - выделение блоков
  • Ctrl+Alt+, - обратное выделение блоков)
  • Ctrl+Alt+J - перейти к начлу/концу блока
  • Shift+Ctrl+G - обернуть элемент в аббревиатуру
  • Shift+Ctrl+/ - закомментировать
  • Shift+Ctrl+` - выделение начинающего и завершающего тэга, чтобы быстро сменить, например "p" на "span"
  • Shift+Ctrl+; - удаление тэга, не завтрагивая внутренностей (внутреннего содержимого)
  • Ctrl+U - обновление/задание размеров картинки
  • Shift+Ctrl+Y - вычисление математический операций ("2*6", "2 10\3", "20+10*4")
  • Shift+Ctrl+R - если в одном из префиксе изменить значение, то оно автоматом изменится во всех остальных. (если сменить border-radius:10px, нажать, то автоматом сменятся и -web- и -webkit-)
  • Ctrl+' - переводим img в data:URL формат
  • Shift+Ctrl+' - переименовываем тэг

Увеличиваем/уменьшаем значения:

  • увеличиваем на 1: Ctrl+↑
  • уменьшаем на 1: Ctrl+↓
  • увеличиваем на 0.1: Alt+↑
  • уменьшаем на 0.1: Alt+↓
  • увеличиваем на 10: Shift+Alt+↑
  • уменьшаем на 10: Shift+Alt+↓

Сокращения

div>ul>li


    

div+p+bq


    

div+div>p>span+em


	

div+div>p>span+em^bq


div+div>p>span+em^^^bq


ul>li*5


div>(header>ul>li*2>a)+footer>p


(div>dl>(dt+dd)*3)+footer>p


div#header+div.page+div#footer.class1.class2.class3



td[title="Hello world!" colspan=3]



ul>li.item$*5


ul>li.item$$$*5


a{Click me}


Click me

a{click}+b{here} and a>{click}+b{here}



clickhere

clickhere

p>{Click }+a{here}+{ to continue}


Click here to continue

p{Click }+a{here}+{ to continue}


Click

here to continue

  

CSS сокращения

  • m10 → margin: 10px;
  • m1.5 → margin: 1.5em;
  • m10-20 → margin: 10px 20px;
  • m-10--20 → margin: -10px -20px;
  • p → %
  • e → em
  • x → ex
  • w100p → width: 100%
  • m10p30e5x → margin: 10% 30em 5ex
  • lh2 → line-height: 2;
  • fw400 → font-weight: 400;
  • p!+m10e! → padding: !important; margin: 10em !important;

Как я понял, посмотреть на большие возможности можно в snippets.json

Префиксы

-bdrs

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

 -super-foo

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

 -trf

transform

 

Генератор “Lorem Ipsum”

p*4>lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!

Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!

Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!

Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio?

ul.generic-list>lorem10.item*4

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.
  • Laboriosam quaerat sapiente minima nam minus similique illum architecto et!
  • Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!
  • Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!

 

Неявные имена тэгов

Можно не писать имя тега, система интуитивно вставит нужное.

  • li для ul и ol
  • tr для table, tbody, thead и tfoot
  • td для tr
  • option для select и optgroup
.wrap>.contentdiv.wrap>div.content
em>.infoem>span.info
ul>.item*3ul>li.item*3
table>#row$*4>[colspan=2]table>tr#row$*4>td[colspan=2]

Yandex BEM/OOCSS

Да он еще умеет превращать в яндексовский БЭМ. Но у меня пока душа не лежит к нему, так что писать не буду, увы)

Настройка

snippets.json
обновляем или добавляем сниппеты

preferences.json
меняем поведение некоторых фильтров и действий Эммета

syntaxProfiles.json
определяем, как должен выглядить сгенерированный html/xml

 

пруф линк http://docs.emmet.io/

Создано при помощи Hugo
Тема Stack, дизайн Jimmy