[![Emmet快速编写CSS样式](https://pic.salongweb.com/2014/02/css.jpg)](https://pic.salongweb.com/2014/02/css.jpg "Emmet快速编写CSS样式")[Emmet](https://yfdxs.com/emmet.html "超高速前端开发工具——Emmet")缩写可以快速地生成[HTML代码](https://api.salongweb.com/emmet-introduce.html "前端开发利器Emmet的介绍")的结构化标签，在我们编写[HTML代码](https://api.salongweb.com/emmet-html.html "Emmet快速编写HTML代码")时节省了很多时间，提高了工作效率，让前端开发人员也不会感觉太繁琐，今天我们来介绍下Emmet如何快速编写CSS样式。
\[related\_posts tagid=”31″\]
Sublime Text本身对CSS的编写也提供了相当多的缩写，而且也带有记忆功能，比如写左浮动我们只需输入fll，Sublime Text就会出现提示，回车就可得到标准的float: left;。

有了[Emmet](https://api.salongweb.com/emmet-introduce.html "前端开发利器Emmet的介绍")就更加快速，编写左浮动只需输入fl。对于CSS样式，Emmet有一个特殊的CSS解析器，有很多预定义的代码片段，例如输入m即可生成margin: ;代码片段。而margin需要赋值，输入m10即可生成margin: 10px;用Emmet编写CSS样式，也是遵循CSS样式的一个基本写法。

基本的CSS样式编写时，很多样式只需输入首字母即可得到不带属性值的CSS样式，像上面说到的margin。

**1、而对于一些带有特定的属性值的CSS样式，只需输入CSS标签与属性值的首字母就可以，比如：**

1. fl → float: left;

**2、而在编写这些CSS样式时，有很多是我们想好的写法，但生成的不是你想要的，比如position: absolute;，我们会输入pa，生成的就不是position: absolute;，这时我们可以：**

1. poa → position: absolute;

**3、一些用-连接的CSS样式和属性值，都可以取首字母：**

1. whscbs → whitewhite-space–collapse:break-strict;

**4、输出默认的CSS样式+，用+操作符，比如：**

1. bg+ → background: \#fffurl() 0 0 no-repeat;

**5、参数别名，Emmet为几个常用的单位值提供了别名：**

1. p → %
2. e → em
3. x → ex

**6、你可以使用别名代替完整的单位：**

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

**7、颜色值，Emmet支持十六进制的颜色值：**

1. c#3 → color: \#333;

**8、#是一个值分离器，所以不需要使用连字符分隔它，例如：**

1. bd5#0s → border: 5px\#000solid:

**9、你可以写一个,两个,三个或六个字符颜色值，Emmet都会正确解析为十六进制的颜色值：**

1. \#1 → \#111111
2. \#e0 → \#e0e0e0
3. \#fc0 → \#ffcc00

**10、属性值没有单位的CSS缩写：**

1. lh2 → line-height: 2;, fw400 → font-weight: 400;

这些CSS属性有：

1. z-index, line-height, opacity and font-weight

**11、!important 修饰符的写法：**

在我们编写好了CSS样式，需要添加!important时，只需要在后面输入!(!前需要有空格，因为这是在CSS样式基础上)，再按Tab键即可：

1. float: left !; → float: left !important;

**12、在编写Emmet代码时需要添加!important，我们可以这样写：**

1. fl! → float: left !important;
2. p6! → padding: 6px !important;

**13、对于有多个属性值的CSS属性，在编写时只需在属性值之间添加-：**

1. m4-6 → margin: 4px6px;
2. p4-6-8 → padding: 4px6px8px;

**14、@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，而@font-face的结构是比较复杂，有background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等属性，用Emmet编写可以让它变得相当的简单，快速，只需输入@f+即可生成：**

1. @font-face {
2. font-family: ‘FontName’;
3. src: url(‘FileName.eot’);
4. src: url(‘FileName.eot?\#iefix‘) format(’embedded-opentype’),
5. url(‘FileName.woff’) format(‘woff’),
6. url(‘FileName.ttf’) format(‘truetype’),
7. url(‘FileName.svg\#FontName’) format(‘svg’);
8. font-style: normal;
9. font-weight: normal;
10. }

**15、前缀：**

CSS3一些新的特性对于我们前端开发人员是一个重要的更新，用几行代码就可以实现强大的功能，这是之前的CSS样式不可能实现的。但这也是一种痛苦，对于不同的浏览器我们需要多次写相同的样式。\[/slidenormal\]

Emmet的CSS解析器有一个很好的功能，可以大大改善为了解决浏览器兼容性而多次写的属性。例如圆角属性，-bdrs4就可生成：

1. -webkit-border-radius: 4px;
2. -moz-border-radius: 4px;
3. border-radius: 4px;

**16、对于一些前缀，Sublime Text中也内置了一些属性的前缀，比如输入trf即可得到：**

1. -webkit-transform: |;
2. -moz-transform: |;
3. -ms-transform: |;
4. -o-transform: |;
5. transform: |;

**17、在Emmet中，在任意两个字符前面添加-操作符，都可以生成带前缀的属性值，比如-float-d：**

1. -webkit-float-d: |;
2. -moz-float-d: |;
3. -ms-float-d: |;
4. -o-float-d: |;
5. float-d: |;

**18、CSS3一个新的、也相当重要的特性是渐变，渐变的属性值又比较复杂，如果再兼容所有的浏览器，代码量是相当大的。而Emmet有一个CSS3渐变的解析器，可以帮我们把这项复杂的工作快速的完成：**

1. lg(left\#f90 20% red)

将生成：

1. background-image: -webkit-gradient(linear, 0 0, 100% 0, );
2. background-image: -webkit-linear-gradient(left\#f90 20% red);
3. background-image: -moz-linear-gradient(left\#f90 20% red);
4. background-image: -o-linear-gradient(left\#f90 20% red);
5. background-image: linear-gradient(left\#f90 20% red);

**19、在lg()括号中需要有值，不然Emmet会解析成left: ;。**

Emmet编写CSS样式还有很多需要注意的地方，而写出来比较困难，到[官方网站](http://document.emmet.io/cheat-sheet/ "Emmet")看看CSS样式的缩写，会更明白。

\[successbox\][Emmet](https://api.salongweb.com/emmet-introduce.html "前端开发利器Emmet的介绍")还有很多强大的功能，下次再整理Emmet的高级功能与大家分享。\[/successbox\]