CSS Abbreviations

How Abbreviations Work for CSS

While Emmet abbreviations are widely known for generating structured markup like HTML and XML, they can also be incredibly useful for optimizing your CSS workflow. Emmet's abbreviations for CSS properties provide a way to quickly generate CSS snippets, making it more than just writing selectors and transforming them.

Generating CSS Property Snippets

Emmet offers predefined snippets for CSS properties, allowing you to quickly generate CSS rules. For more customization, you can configure these snippets in the "Options" page.

Value Injection

To specify a value for a CSS property, you can directly inject it into the abbreviation. For instance:

• m10 expands to margin: 10px;
• m10-20 expands to margin: 10px 20px;
• m-10--20 expands to margin: -10px -20px;

Emmet has a special CSS resolver that processes such abbreviations and expands them into complete CSS properties.

Property and Value Separation

The resolver looks for a snippet definition in the "Options" page based on the abbreviation. If found, it outputs it as a regular snippet. Otherwise, it extracts the value part from the abbreviation.

Emmet does not require special value separators like m:5. Instead, it identifies the value bound by the first occurrence of a digit or hyphen. For example, in the m10 abbreviation, m is the property part, and 10 is the value part.

The snippet definition can be customized in the "Options" page, structured like a CSS property, allowing Emmet to split it into a CSS property and value. The transformed value part is then placed at the caret position.

Supplying Values with Units

Emmet automatically adds units to values based on their type. For integer values, it defaults to px, while float values use em. However, you can explicitly specify the unit by placing alpha characters right after the value in the "Options" page.

Value Aliases

Emmet provides aliases for commonly used units. These aliases can be configured in the "Options" page.

Color Values

Emmet also supports hex color values, allowing you to generate CSS rules for colors quickly. For more details on configuring color preferences, please see the "Options" page.

Unit-less Properties

Some CSS properties are defined as unit-less, and no unit suffix will be added. For example, lh2 → line-height: 2; Emmet recognizes properties like line-height, font-weight, opacity, and z-index as unit-less by default. However, you can customize this behavior in the "Options" page.

!important Modifier

To add the !important modifier to any CSS abbreviation, simply add ! at the end. For example:

p!+m10e!

Expands to:

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

Emmet's ability to streamline CSS property generation can significantly improve your CSS coding efficiency.