Нужна регистрация для бесплатного обучения
ЖАЛОБЫ И ПРЕДЛОЖЕНИЯ

КОНТАКТЫ


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

29.05.2017
И
Комментариев нет
164

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

.block
#block

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

Emmet

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

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

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

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

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

li.item$*3 + 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;

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

JOIN VSP GROUP PARTNER PROGRAM: https://youpartnerwsp.com/ru/join?93412

ПРИСОЕДИНЯЙТЕСЬ
Поделиться

Web Developer

Привет, с вами Developer blog. На этом канале вы сможете погрузится в мир web-разработки. Множество уроков по html, css ,bootstrap, foundation, различные cms системы такие как wordpress, joomla, научимся создавать интернет магазины и многое другое! Так же много уроков по верске сайтов! Подписывайтесь на наш канал, группу вконтакте, оставляйте свои вопросы и мы обязательно их рассмотрим в видео!

Последние сообщения



Обсуждение закрыто.