CSS in Zen Coding

Value aliases

There are several common aliases:

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

These aliases can be used instead of the full unit:

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

Color values

16 binary color values are supported, for example: c#3 → color: #333; . #symbols are separators of values, so you do not need to use hyphens to separate them. For example bd5#0s , expand into border: 5px #000 solid :. is separated from the color from the color 5 value # s ( solid  the alias), because the s 不是16进制的字符，不需要用  - delimiter.

You can write color values in the form of 1, 2, 3, or 6 digits:

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

When css.color.short a reference is available (the default), #ffcc00 a value like this is automatically simplified #fc0 . You can also css.color.case automatically change the case based on the reference.

Value with no units

Some CSS properties are defined as no units, such as lh2 → line-height: 2; , fw400 → font-weight: 400; .

These values are:,,, ‘z-index line-height opacity and font-weight , you can use the css.unitlessProperties citation to overwrite them.

!important modifier

You can add a subscript after any CSS abbreviation ! to get the !important value:

p!+m10e!

Will generate

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

Vendor Prefix

CSS3 's new features bring the Gospel to Web programmers: Few lines of code can accomplish tasks that were almost impossible a few years ago. But at the same time these features are painful: You must write multiple identical properties for different browsers. CSS parsers have a fantastic feature that can significantly improve the experience of writing CSS3. Each time a hyphen is added before the CSS property or abbreviation, a copy with the vendor prefix is automatically created for each property. For example, the -bdrs abbreviation will be expanded into:

-webkit-border-radius:-moz-border-radius:; Border-radius:;

In addition, in an editor that supports TabStop (for example, Eclipse, Sublime Text 2, Espresso, and so on), a value placeholder is created, and the programmer can enter attribute values and automatically put them into all generated properties.

How does it work?

When you expand an abbreviation preceded by a hyphen, the hyphen is removed and the snippets.json remaining abbreviated fragment definition is found. For example -bdrs , the abbreviation will look for the snippet.json definition in bdrs , and the contents of the definition are as follows:

"BDRs": "border-radius:|;"

In other words, it bdrs will be expanded into border-radius attributes. If the definition is not found, the abbreviation itself will be treated as a CSS property name.

The properties computed by the CSS parser will be output, and it will look for specific occurrences of the specific vendor classification . These classifications define the branches in the settings css.{vendor}Properties . {vendor}is the vendor prefix for the browser, such as webkit , and moz so on.

If extended properties are found in these classifications, their vendor prefixes are used as leading properties. Otherwise, all prefixes will be used.

For example, border-radius it is defined in css.webkitProperties and css.mozProperties  , so the output of this property will be prefixed with the webkit moz . In another case, the foo attribute is not defined in any vendor classification, so when the abbreviation is expanded -foo , all available prefixes are output:: webkit , moz , and ms o . It is especially useful for the forefront CSS properties that are now being implemented.

Let's say Google Chrome just came out yesterday and super-foo you want to use it in your project right now. You can use -super-foo properties to expand the results as follows:

-webkit-super-foo:-moz-super-foo:;-ms-super-foo:;-o-super-foo:; Super-foo:;

Default Add Prefix Property

When writing a CSS file, you might want to find the "clear" property of CSS3 without the vendor prefix variable. This makes it awkward to -trf write trf abbreviations like ( transform aliases) with leading hyphens.

This is the reason why Emmet has options by default css.autoInsertVendorPrefixes . This property takes effect and all CSS properties defined in the vendor category will be automatically provided with matching vendor prefix variables.

This means that you do not need to use hyphens to get valid prefix variables for known CSS properties, and bdrs you can directly expand or trf abbreviate to get a valid vendor prefix attribute.

Explicitly vendor prefixes

Sometimes you might want to output a CSS property with only the specified vendor prefix attribute.

Assuming you want to output webkit only moz the attributes with and prefixes transform , you can write the following abbreviations:

-wm-trf

As we have seen, we have slightly modified the abbreviation by adding a list of character prefixes. In this case, the w ( webkit ) and m ( moz ) prefixes are added. The single-letter prefixes of the Emmet are as follows:

• w:webkit
• m:moz
• s:ms
• o:o

Fuzzy Lookup

If you look at the overview table, you'll find a lot of CSS fragments to remember. And part of them is very long to separate the logic.

To make CSS easier to write, Emmet implements Fuzzy lookup logic for CSS fragments: each time an unknown abbreviation is entered, Emmet always tries to find a similar fragment definition.

For example, as an ov:h overflow: hidden; alternative to () abbreviations, you can enter ov-h、 ovh or simply enter oh . See the example below. Demonstrates bxz:cb ovx:h pos:a different examples of, and fragments.

CSS in Zen Coding