Web 前端利器Emmet 的CSS 用法总结
转载来源： http://devework.com/emmets-css.html
承接上文《Web 前端利器Emmet 的HTML用法总结》，这篇主要是Emmet 的 html的好基友——CSS 的用法。原文来自tutsplus，由w3cplus 翻译，感谢所有原作者。
属性
CSS提供了属性的值，比如font-size，margin和 padding等等：
Emmet定义了所有已知的CSS属性和缩写。所以border-bottom缩写是bdb，border-top缩写是bdt。正如下面的示例font-size缩写是fz：
假设你在你的编辑器中输入fz，然后按一下tab键，Emmet就像一个魔法师一样将缩写变成有效的CSS，并且放在你的光标之处。
属性值
现在我们已经了解了CSS的属性，它只需要添加一个值。这是通过一个组合缩写和所需要的值一起来完成。例如，fz18将输出font-size:18px。你不需要输入px，因为Emmet将会其单位是px。如果一个项目没有一个单位（如font-weight），Emmet会很聪明，他不会添加像素单位。
单位
如果你在CSS不经常使用的像素(px)单位，那会是什么？是em、rem、%、ex和px吗？那么这些单位在Emmet中都是可以使用的。在Emmet中每一个单位都有其缩写形式：
px→ 默认p→%e→emr→remx→ex
要使用一个单位，只需要在值的后面使用缩写的单位值。下面的例子是使用em定义font-size：
多个单位
CSS中的某些属笥，比如margin，允许多个值。在Emmet中要做到这一点，只需要每个值之间使用破折号(-)。来看看下面的例子，给body定义margin的四个值：
颜色
在Emmet中使用#前缀，后面紧跟颜色值，但不同的字符数将会输出不同的十六进制代码。来看一些例子：
＃1→＃111111＃E0→＃e0e0e0＃FC0→＃FFCC00
下面定义通过c#2定义body的颜色值，将会输出#222：
!important
尽管在CSS中!important并不经常使用，但在Emmet也带有一定的缩写。添加!就可以自动生成：
多属性
现在我们具Emmet的CSS特性的一个基本了解，也是将它们放在一起的时候。就类似于Emmet和HTML中的相邻元素的功能。可以使用加号+运算符来创建多个属性。我们来看一个简单的示例：
示例
记住，你可以使用所有缩写或者将其分开。这并不是很重要，关键的是你要使用得正确，它能更容易让你编写你的CSS。这里有一个动画，他给div.panel创建一些样式：
