Решил я тут взяться за 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>.content | div.wrap>div.content |
em>.info | em>span.info |
ul>.item*3 | ul>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/