#7. Как пользоваться плагином Emmet в Sublime text 2

#7. Как пользоваться плагином Emmet в Sublime text 2

.block
#block

Emmet великолепен для быстрого написания разметки. Просто напечатайте css-селекторы для нужной вам разметки, и нажмите tab. Используете Jade, Slim или Haml? Emmet работает с ними так же хорошо, как и с HTML.

Emmet

Посмотрите немного примеров использования Emmet. Также не забудьте посмотреть шпаргалку по синтаксису, в которой описаны все возможности для работы с разметкой.

element + tab создаёт элемент и позиционирует курсор внутри него.

elementchildElement + tab создаёт вложенные элементы.

element*5 + tab создаёт указанный элемент столько раз, сколько указано.

Также вы можете использовать символ $ в качестве счётчика. Используйте $$ для счётчика, начинающего отсчёт с нуля.

Квадратные скобки используются для указания атрибутов элемента, фигурные — для указания контента.

CSS

Изучение возможностей Emmet в CSS — это одна из лучших инвестиций для фронтэндера. Это не только повысит скорость разработки, но и поможет предотвратить часто совершаемые ошибки.

В CSS emmet работает при помощи сокращений, напоминающих пары свойство/значение. Нет чётко определённых сокращений, emmet работает на основе так называемого fuzzy matching — он делает выбор, какое свойство использовать, на основе того, что вы ввели.

Примеры:

posrel → position: relative;
posab → position: absolute;
fl → float:
fr → float: right;
db → display: block;
dib → display: inline-block;
tdn → text-decoration: none;
c → color: #
w → width:
w100 → width: 100px;
w100p → width: 100%;
p → padding:
p10 → padding: 10px;
p10p → padding: 10%;
bt1-s-red → border-top: 1px solid red;

Вы поняли идею — неплохо бы натренировать ваш мозг, чтобы вы могли на лету использовать эту технику вместо печатания полных пар свойство/значение.

[taidleqdwwhdd]

спасибо большое за это обучающее видео

[ilyak]

Забавно, если в плагине ставлю ul>li.item$*5, как в уроке, ничего нужного не происходит, если ul>li>.item$*5 дает 5 div в списке, если вместо li - ol, выдает как раз 5 li, притом 5li содержаться в 1 ol и ul

[antonshtihov]

Извените но по английски читается Айтем а не итем)

Иесть какая документация по подобный макросам? ссылку можно?

[ВладКоваль-пл]

Здравствуй, у меня пропал эта штука которая подсказывает возможние команди, как только установил она била а потом пропала, может я что то виключил