While Emmet abbreviations are good for generating HTML, XML or any other structured markup, it may look useless for CSS. You don’t want to write CSS selectors and transform them to CSS selectors, right? The only thing Emmet can do for you is to provide shorthands for CSS properties, but editors with native snippets and autocomplete can help you way better.
Actually, Emmet has something to offer.
For CSS syntax, Emmet has a lot of predefined snippets for properties. For example, you can expand
m abbreviation to get
margin: ; snippet. But you don’t want just
margin property, you want to specify a value for this property. So you have to manually type, let’s say,
Emmet can greatly optimize your workflow here: you can inject value directly into abbreviation. To get
margin: 10px; you can simply expand the
m10 abbreviation. Want multiple values? Use a hypen to separate them:
m10-20 expands to
margin: 10px 20px;. Negative values? No problem: precede the first value with hyphen and all the rest with double hyphens:
m-10--20 expands to
margin: -10px -20px;
How it works?
Emmet has a special CSS resolver that expands such abbreviations into a complete CSS property.
Here’s what happens when you expand
First, it looks for a
m10 snippet definition in
snippets.json. If it’s found, it simply outputs it as a regular snippet. Otherwise, it extracts value from abbreviation.
To provide best user experience, resolver doesn’t introduce any special value separator: it’s much faster to type
m5 rather than
m:5. So it needs to find a value bound: a first occurrence of digit or hyphen is treated as a value bound. In
m is property part and
10 is value part.
When property part is found, resolver searches for the snippet definition in
snippets.json. For an
m part, it will find
"m": "margin:|;" definition (
| character is used as a caret position reference when the snippet is expanded).
The snippet definition looks like a CSS property (this is very important!) so Emmet is able to split it to a CSS property and value and place transformed value part at caret position (the
Supplying values with units
By default, when you expand an abbreviation with integer value, Emmet outputs it with a
margin: 10px;. If you’re expanding an abbreviation with a float value, it is outputted with an
margin: 1.5em;. But you can explicitly provide the unit name, just by putting any alpha characters right after value:
If you’re explicitly defining units, you don’t need to use hyphens to separate values anymore:
margin: 10ex 20em;,
margin: 10ex -5px;.
Emmet has a few aliases for commonly used values:
You can use aliases instead of full units:
margin: 10% 30em 5ex
Emmet supports hex color values, like this:
color: #333;. The
# sign is a value separator so you don’t need to use hyphen to separate it. For example,
bd5#0s expands to
border: 5px #000 solid: the
# sign separates color from
5 and since
s (alias to
solid) is not a hexadecimal character, it can be used without
- value separator.
You can write one, two, three or six characters as color value:
css.color.short preference is enabled (by default), color values like
#ffcc00 are automatically shortened to
#fc0. You can also automatically change character case with
Some CSS properties are defined as unit-less, e.g. no unit suffix will be outputted:
These values are:
font-weight but you can override them with
You can add
! suffix at the end of any CSS abbreviation to get
padding: !important; margin: 10em !important;