Sublime Software uses Emmet plugin to quickly write CSS styles

When you write a basic CSS style, many styles simply enter the first letter to get a CSS style with no attribute values, like the margin mentioned above. For some CSS styles with specific attribute values, just enter the first letter of the CSS tag and attribute value, such as:

Fl→float:left;

While writing these CSS styles, there are a lot of things we want to write, but not what you want, such as position:absolute, we will input PA, generated is not position:absolute; At this time we can:

Poa→position:absolute;

Some use-linked CSS styles and attribute values can be used to take the first letter:

Whscbs→whitewhite-space-collapse:break-strict;

Output the default CSS style +, with the + operator, for example:

Bg+→background: #fff url () 0 0 no-repeat;

Parameter aliases, Emmet provides aliases for several commonly used unit values:

p→%
E→em
X→ex

You can use aliases instead of full units:

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

Color values, emmet support hex color values:

C#3→color: #333;

#是一个值分离器, so you don't need to separate it with hyphens, for example:

bd5#0s→border:5px #000 Solid:

You can write a color value of two, three, or six characters, and the Emmet will correctly parse the color value into the 16 binary:

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

Property values do not have a unit of CSS abbreviations:

Lh2→line-height:2;, fw400→font-weight:400;

These CSS properties are:

Z-index, Line-height, opacity and Font-weight

The!important modifier:
After we have written the CSS style and need to add!important, just enter it later! (You need a space before, because this is based on a CSS style), and then press the TAB key:

Float:left!; →float:left!important;

You need to add!important when writing Emmet code, we can write this:

fl! →float:left!important;
p6! →PADDING:6PX!important;

For CSS properties with multiple attribute values, simply add between the property values when writing-:

M4-6→MARGIN:4PX 6px;
p4-6-8→padding:4px 6px 8px;

@font-face is a module in CSS3, he is mainly to embed their own defined Web fonts into your Web page, and @font-face structure is more complex, there are background-image, Border-radius, Font, @ Font-face, Text-outline, Text-shadow and other properties, written in Emmet can make it quite simple, fast, just input @f+ can be generated:

@font-face {
font-family: ' FontName ';
Src:url (' Filename.eot ');
Src:url (' Filename.eot #iefix ') format (' Embedded-opentype '),
URL (' filename.woff ') format (' Woff '),
URL (' Filename.ttf ') format (' TrueType '),
URL (' filename.svg#fontname ') format (' SVG ');
Font-style:normal;
Font-weight:normal;
}

Prefix:
CSS3 Some of the new features are an important update for our front-end developers, and with a few lines of code you can implement powerful features that are not possible with previous CSS styles. But this is also a pain, for different browsers we need to write the same style multiple times. [/slidenormal]
The Emmet CSS parser has a good feature that can greatly improve the properties that are written multiple times to address browser compatibility. For example, fillet properties,-BDRS4 can be generated:

-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;

For some prefixes, the Sublime text also contains a number of property prefixes, such as the input TRF can be obtained:

-webkit-transform: |;
-moz-transform: |;
-ms-transform: |;
-o-transform: |;
Transform: |;

In Emmet, you can generate prefixed attribute values, such as-float-d, by adding an-operator before any two characters:

-webkit-float-d: |;
-moz-float-d: |;
-ms-float-d: |;
-o-float-d: |;
Float-d: |;

CSS3 a new and quite important feature is the gradient, the property value of the gradient is more complex, if compatible with all browsers, the amount of code is quite large. And Emmet has a CSS3 gradient parser that can help us get this complex job done quickly:

LG (left #f90 20% red)

will be generated:

Background-image:-webkit-gradient (linear, 0 0, 100% 0,);
Background-image:-webkit-linear-gradient (left #f90 20% red);
Background-image:-moz-linear-gradient (left #f90 20% red);
Background-image:-o-linear-gradient (left #f90 20% red);
Background-image:linear-gradient (left #f90 20% red);

In LG () brackets need to have value, otherwise Emmet will parse to left:;.
Emmet writing CSS style There are a lot of things to pay attention to, and it is difficult to write, to the official website to look at the CSS style abbreviation, will be more clear.

Sublime Software uses Emmet plugin to quickly write CSS styles