CSS-аббревиатуры

Хотя сокращения Emmet хороши для создания HTML, XML или любой другой структурированной разметки, они могут показаться бесполезными для CSS. Вы не хотите писать селекторы CSS и преобразовывать их в селекторы CSS, верно? Единственное, что Emmet может сделать для вас, — это предоставить сокращения для свойств CSS, но редакторы с собственными фрагментами и автозаполнением могут помочь вам намного лучше.

На самом деле Эммету есть что предложить.

Что касается синтаксиса CSS, у Emmet есть множество предопределенных фрагментов для свойств. Например, вы можете расширить mаббревиатуру, чтобы получить margin: ;сниппет. Но вам не нужно просто marginсвойство, вы хотите указать значение для этого свойства. Таким образом, вы должны вручную ввести, скажем, 10px.

Здесь Emmet может значительно оптимизировать ваш рабочий процесс: вы можете вводить ценность прямо в аббревиатуру . Для получения margin: 10px;можно просто расширить m10аббревиатуру. Хотите несколько значений? Используйте дефис, чтобы разделить их: m10-20расширяется до margin: 10px 20px;. Отрицательные значения? Нет проблем: перед первым значением ставится дефис, а перед всеми остальными — двойной дефис: m-10--20расширяется доmargin: -10px -20px;

Как это устроено?

У Emmet есть специальный преобразователь CSS, который превращает такие аббревиатуры в полное свойство CSS.

Вот что происходит, когда вы расширяете m10аббревиатуру.

Во-первых, он ищет определение m10фрагмента в snippets.json. Если он найден, он просто выводит его как обычный фрагмент. В противном случае он извлекает значение из аббревиатуры.

Чтобы обеспечить наилучшее взаимодействие с пользователем, распознаватель не вводит никакого специального разделителя значений: его гораздо быстрее набирать m5, чем m:5. Поэтому необходимо найти привязку значения: первое вхождение цифры или дефиса рассматривается как привязка значения . Например m10, mэто часть свойства и 10часть значения .

Когда часть свойства найдена, преобразователь ищет определение фрагмента в файлах snippets.json. Для mчасти он найдет "m": "margin:|;"определение ( |символ используется в качестве ссылки на позицию каретки при расширении фрагмента).

Определение фрагмента выглядит как свойство CSS (это очень важно!), поэтому Эммет может разделить его на свойство и значение CSS и поместить преобразованную часть значения в позицию курсора ( |символ).

Предоставление значений с единицами измерения

По умолчанию, когда вы расширяете аббревиатуру целочисленным значением, Emmet выводит ее с pxединицей измерения: m10→ margin: 10px;. Если вы расширяете аббревиатуру с помощью значения с плавающей запятой, оно выводится с emединицей измерения: m1.5→ margin: 1.5em;. Но вы можете явно указать имя модуля, просто поставив любые альфа-символы сразу после значения: m1.5ex→ margin: 1.5ex;, m10foo→ margin: 10foo;.

Если вы явно определяете единицы измерения, вам больше не нужно использовать дефисы для разделения значений: m10ex20em→ margin: 10ex 20em;, m10ex-5→ margin: 10ex -5px;.

Псевдонимы значений

У Эммета есть несколько псевдонимов для часто используемых значений:

• p→%
• e→em
• x→ex

Вы можете использовать псевдонимы вместо полных единиц:

• w100p→width: 100%
• m10p30e5x→margin: 10% 30em 5ex

Цветовые значения

Emmet поддерживает шестнадцатеричные значения цвета, например: c#3→ color: #333;. Знак #является разделителем значений , поэтому вам не нужно использовать дефис для его разделения. Например, bd5#0sрасширяется до border: 5px #000 solid: #знак отделяет цвет от 5и, поскольку s(псевдоним до solid) не является шестнадцатеричным символом, его можно использовать без -разделителя значений.

Вы можете указать один, два, три или шесть символов в качестве значения цвета:

• #1→#111111
• #e0→#e0e0e0
• #fc0→#ffcc00

Когда предпочтение css.color.short включено (по умолчанию), значения цветов #ffcc00автоматически сокращаются до #fc0. Вы также можете автоматически изменить регистр символов по своему css.color.caseусмотрению.

Безразмерные свойства

Некоторые свойства CSS определены как безразмерные , например, суффикс единицы не выводится: lh2→ line-height: 2;, fw400→ font-weight: 400;.

Эти значения: 'z-index, line-height, opacityи , font-weightно вы можете переопределить их с помощью css.unitlessPropertiesнастроек.

!важный модификатор

Вы можете добавить !суффикс в конце любой аббревиатуры CSS, чтобы получить !importantзначение:

 

p!+m10e!

 

...будет производить

 

padding: !important; margin: 10em !important;