大多数关于Emmet的文章和教程都是在说明它对HTML的处理能力，但是今天我们要来关注一下Emmet的CSS部分。准备好来增强你的CSS手写能力了吗？让我们开始吧！
注：在你阅读下面的部分之前，建议你先对CSS有一定的了解。
Emmet是什么？
Emmet采用文本缩写的方法，集合了不同的缩写，并且扩展为对应的html/xml/css。访问 下载页面 ，并为你的编辑器安装Emmet。
在使用Emmet编写代码时，输入适当的缩写，然后按下Emmet的功能键。在Sublime Text中，是TAB键。你正在处理的文件的语法将决定使用哪些缩写。
为什么要使用Emmet？
Emmet使用符合常识的缩写来简化编写代码的过程。它可以起到多大的作用，取决于你投入了多少时间去学习它的来龙去脉。
Emmet（以前叫做Zen Coding ）是一个面向Web开发者的工具，它可以大大加快你的HTML和CSS的工作流程。 它不仅可以节省你的时间，还可以使编写代码的过程更加轻松愉快。只要输入很少的字符，然后看着它们神奇地扩展为格式完美的代码！如果产生了一些错误，撤销按钮可以将扩展后的代码变回原本的缩写形式，这样你就可以再次编辑并且将它扩展。
我同时还发现Emmet让我更加轻松地记住了代码。缩写毫无疑问更加易于记忆。 text-transform:对应 “tt” 和 text-align:justify; 对应 “taj” 。可以看到这会有多大的帮助。你将开始学习新的CSS属性并且只需要记住它的缩写。你甚至不需要担心分号和空格，Emmet为你解决这些事情！
Emmet和CSS
让我们来看看Emmet的CSS缩写的基本构成，以及它如何加快工作流程。
属性（Properties）
CSS对属性赋予相应的值，如 font-size，margin，padding，等等。
取自Emmet对每个已知的CSS属性定义了一个缩写。因此， border-bottom 就是 bdb ， border-top 就是 bdt 。下面这个例子是 font-size ，也就是 fz 。
键入缩写之后，按下功能键（我的配置，TAB）和Emmet会神奇地将缩写扩展为有效的CSS，并且将光标移动到你会需要继续输入的地方。
值（Values）
现在我们已经了解了属性，是时候添加一个值了。这是通过键入缩写与所需的值的组合来完成的。例如，fz18 将会输出 “font-size: 18px; 。你不需要输入”px”，因为Emmet会默认添加它。如果一个项目没有单位（如 font-weight ），Emmet也足够聪明地知道不要添加 px。
单位（Units）
如果你并不都是使用像素怎么办？em ， rem ， % ， ex ，和 px 这些单位都可以在Emmet中使用。每个单位也有一个缩写形式（虽然这看起来可能有点极端）：
px→ 默认p→%e→emr→remx→ex要使用一个单位，只需值的末尾加上单位的缩写。下面的例子是用单位em定义一个字体大小
多个单位（Multiple Units）
某些属性，比如 margin ，允许多个值。要用Emmet做到这一点，就用破折号（-）分隔每一个值。来看看下面这个例子，它给 body 定义 margin 的四个值。
颜色（Colors）
Emmet要求你在前面加上# ，而不是将加到值的末尾。所以 # 紧跟在你的属性后面，在值的前面。不同的字符数输出不同的十六进制代码。来看一些例子：
#1→#111111#e0→#e0e0e0#fc0→#ffcc00下面是定义 body 颜色的一个例子，使用#111（c#1）：
!important
尽管 !important 标签不应该经常使用，Emmet 还是提供了它，为防万一。添加一个感叹号 ! 到你的缩写，像这样：
多个属性（Multiple Properties）
现在，我们对Emmet的CSS功能的有了一个基本的了解，是时候开始把它们结合起来。像类似类似处理HTML的方式，你可以给它们每一个都添加一个加号（+）。请记住，如果你遇到了问题，你可以随时撤销并修改字符串。
写出你的所需的每一个属性和值，用 + 分隔它们，然后按下功能键来查看结果。
下面是为 body 定义不同的 margin 和 padding 的一个例子。
例子
记住，你可以组合或者独立地使用所有这些缩写。这不是关于怎样一次就使用Emmet写出正确地代码，只是让你更容易编写你的CSS。为了总结这些很酷的GIF动画，这里有个一个例子，快速创建一个 class 为panel 的 div。
结论
Emmet是一个强大的工具。被一些人称为“高速”的编码工具，它可以让你花更少的时间一遍又一遍地写同样的代码，而无需手动创建自己的代码段。Emmet的灵感来自于CSS选择器，并且可以在所有主流的编辑器中使用，以适应任何开发者的工作流程。 请记住，你添加到你的工作流的任何新工具都会有一个学习曲线，但不要花费比你需要弄清楚它是如何为你工作这个过程更多的时间。定期查看文档是一个很好的复习，同时Emmet提供了一个 cheat sheet ，囊括了所有可用的功能。这是为了帮助你少一些思索，同时写更多的代码而建的！