emmet css Abbreviations

Abbreviations css

• For CSS syntax, Emmet there are a number of predefined code snippet for the property. For example, you can extend the macronym for margin: ;the code segment.
• For margin: 10px;you can simply expand m10abbreviations.
• Require multiple values: Use hyphens to separate them: m10-20expands margin: 10px 20px;.
• Negative: before the first hyphen value, all other values back with double hyphen: m-10--20extendedmargin: -10px -20px;

Value and units

• By default, when you use an integer value expand abbreviations, Emmet outputs it to the px unit: m10 → margin: 10px ;.
• To use the extended floating-point values ​​abbreviation output unit places em m1.5 → margin: 1.5em ;.
• However, you need to keep up the value behind any alphabetic characters to explicitly provide Name: m1.5ex → margin: 1.5ex;, m10foo → margin: 10foo ;.
• If you want to explicitly define the unit is no longer necessary to use a hyphen-separated values: m10ex20em → margin: 10ex 20em;, m10ex-5 → margin: 10ex -5px ;.

Alias ​​value

Emmet alias having some common values:

• p → %
• e → Kids
• x → ex
  , you can use the alias instead of the complete unit:
• w100p → width: 100%
• m10p30e5x → margin: 10% 30em 5ex

Color values

• Emmet hexadecimal color value as follows: c # 3 → color: # 333 ;.

• Symbol is a value separator, so you do not need to use hyphens to separate them.

• For example, bd5 # 0s expands border: 5px # 000 solid: # 5 and separated from the color symbol, as s (alias Solid) than hexadecimal character, and therefore may not be used - it is a case where the value of the use of separator .

You can write one, two, three, or six characters as the color value:

• #1 → #111111
• #e0 → #e0e0e0

• # # Ffcc00 fc0 →

  When css.color.short preferably is enabled (default), the color values ​​like # ffcc00 automatically be shortened # fc0. You can also automatically change the character case according to css.color.case preferences.

No property unit

Some non-CSS property is defined as a unit, for example, no cell is output suffix: lh2 → line-height: 2 ;, fw400 → font-weight: 400 ;.
These values are: 'z-index, line- height, opacity , and font-weight.

!important

You can add any CSS at the end of the abbreviated suffix for important value!!:
p!+m10e!

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

Browser prefixes

For example, -bdrs abbreviation expands

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

Clear vendor prefixes

Sometimes you may want to output CSS vendor prefixes attribute with the specified attributes.
Suppose you want to output transform property with webkit and moz prefix. In this case, you may be abbreviated: -wm-trf

Emmet has a letter prefix:

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

Gradient

lg(left, #fc0 30%, red)

background-image: -webkit-linear-gradient(left, #fc0 30%, red);
background-image: -moz-linear-gradient(left, #fc0 30%, red);
background-image: -o-linear-gradient(left, #fc0 30%, red);
background-image: linear-gradient(to right, #fc0 30%, red);

Fuzzy search

For example, in addition to writing ov: h (overflow: hidden;) outside the abbreviation, you can also write ovh, ovh even oh.