看到一篇翻译的内容很好，转载过来了，不知道是哪位作者的，如果发现，可以给我留言。通过这篇文章，我发现我对emmet这个插件了解的还是太少了。原来css3的前缀还可以自动补全呢？
例如：brd 输出 -webkit-border-radius:, -ms-border-radius, border-radius.等。收藏起来。
一小我的绝对是猖狂，一个国度的绝对是杂沓。【申明】本系列博文是根据 Emmet 官方文档翻译的，原文地址为：http://docs.emmet.io/，项目组内容已经在博主之前的博文中节选过，为便利已经收藏过之前博文的伴侣， 没有删除这些博文，仅将其完全的收录于本系列中。
CSS 缩写
魔难对于天才是一块垫脚石。……对能干的人是一笔财富，对弱者是一个万丈深渊。Emmet 缩写可以或许很好地生成 HTML、XML 或者随便率性一种布局化的标识表记标帜，看起来不克不及用于 CSS。你应当不会想经由过程书写 CSS 选择器来翻译生成 CSS 选择器吧？Emmet 可以或许做的只有供给 CSS 属性的短格局，然则带有本地片段和主动完成的编辑器可以或许做的更好。
实际上，Emmet 已经供给了一些帮助。
对于 CSS 语法，Emmet 有很多预定义的片段和属性。例如，可以将 m 扩大成 margin: ; 片段。但也许所须要的不只是 margin 属性，还须要为此属性指定一个值。还必须手工输入，比如，10px。
Emmet 极大地优化工作流：可以把值直接注入缩写。margin: 10px; 可以简单地扩大自 m10 缩写。想要多个值？应用连字符隔开它们：m10-20 将扩大成 margin: 10px 20px;。负值？没题目：在前面加上连字符并且后续的值都应用两个连字符：m-10--20 扩大成 margin: -10px -20px;。
它是如何工作的？
Emmet 有特别的解析器来解决如何将缩写展开成完全的 CSS 属性的题目。
来看一下展开 m10 时都产生了什么。
起首，在 查找 snippets.json 中查找 m10 片段的定义。若是找到了，就简单地算作通俗的片段来输出。不然就从缩写中把值提取出来。
为了供给最佳的用户体验，解析器不引入任何指定的分隔符：输入 m5 远快过输入 m:5。所以它只须要找到值鸿沟：初次呈现的数字或者连字符充当了值鸿沟。在 m10 傍边，m 是属性，而 10 则是值。
当属性被发明发明，解析器在 snippets.json 中搜刮版定义。对于 m 将找到 "m": "margin:|;" 定义（字符 | 是在展开的片段顶用来标识表记标帜光标的地位的）。
片段定义看来来很像 CSS 属性（这很是首要），所以 Emmet 可以或许将其拆分成 CSS 属性和值，并将值放入光标地点的地位（ | 字符的地位）。
供给带有单位的值
默认地，当展开带有整数值的缩写时，Emmet 输出会带有 px 单位：m10 →margin: 10px;。若是展开的缩写带有浮点娄，输出将带有 em 单位：m1.5 →margin: 1.5em;。不过也可以经由过程在值的后面放置随便率性的字母来明白指定单位： m1.5ex → margin: 1.5ex;， m10foo → margin: 10foo;。
若是明白定义了单位，不须要应用连字符分隔各个值： m10ex20em →margin: 10ex 20em;， m10ex-5 → margin: 10ex -5px;。
值别号
Emmet 有几个常用的别号：
p→％e→emx→ex
可以用这些别号来庖代完全的单位：
w100p→width: 100％m10p30e5x→margin: 10％ 30em 5ex
色彩值
Emmet 付出16进制地色彩值，例如： c＃3 → color: ＃333;。＃ 符号是值的分隔符，所以不须要应用连字符做分隔。例如 bd5＃0s 展开成 border: 5px ＃000 solid: 。5 被从色彩值的 ＃ 到 s （solid 的别号）从色彩平分隔出来，因为 s 不是16进制的字符，不须要用 - 分隔符。
可以以 1个、2个、3个或者6个数字的情势书写色彩值：
＃1→＃111111＃e0→＃e0e0e0＃fc0→＃ffcc00
当 css.color.short 引用 可用时（默认），类似 ＃ffcc00 如许的值会主动简化成 ＃fc0。也可以按照 css.color.case 引用主动改变大小写。
无单位的值
一些 CSS 属性被定义为无单位，例如 lh2 → line-height: 2;，fw400 → font-weight: 400;。
这些值是: ""z-index、 line-height、 opacity 和 font-weight ，可以哄骗 css.unitlessProperties 引用来覆盖它们。
!important 润饰符
可以在任何 CSS 缩写后面添加 ! 下标来获得 !important 值：
p!+m10e!
将生成
padding: !important; margin: 10em !important;
Vendor 前缀
CSS3 的新特点为 web 法度员带来了福音：很少的几行代码就能完成几年前近乎不成能实现的任务。但同时这些特点对带来了疾苦：必须为不合的浏览器编写多个雷同的属性。
Emmet 的 CSS 解析器有一个很奇妙的特点，可以明显进步编写 CSS3 的体验。每次在 CSS 属性或缩写前添加连字符，Emmet 就主动为每个属性创建带有 vendor 前缀的副本。例如，-bdrs 缩写将展开成：
-webkit-border-radius: ; -moz-border-radius: ; border-radius: ;
此外，在支撑 tabstop 的编辑器（例如 Eclipse、 Sublime Text 2、 Espresso 等）中，Emmet 将建树值占位符，法度员可以输入属性值并主动放到全部生成的属性中。
它如何工作？
展开前面带有连字符的缩写时，Emmet 删除连字符并在 snippets.json 查找残剩的缩写的片段定义。例如 -bdrs 缩写将会在 snippet.json 中查找 bdrs 定义，定义的内容如下：
"bdrs": "border-radius:|;"
也就是说 bdrs 将被展开成 border-radius 属性。若是定义没有找到，缩写本身将被当成 CSS 属性名。
经过 CSS 解析器策画出的属性将被输出，它将查找特定的在特定的 vendor 分类是否呈现。这些分类定义设置中的 css.{vendor}Properties 分支。 {vendor} 是浏览器的 vendor 前缀，例如 webkit、 moz 等。
若是扩大属性在这些分类中被找到，它们的 vendor 前缀将用作前导属性。不然，所有的前缀将被应用。
例如，border-radius 被定义在 css.webkitProperties 和 css.mozProperties 中，所以这个属性的输出将带有 webkit 和 moz 前缀。另一种景象，foo 属性没有定义在任何 vendor 分类中，所以在展开 -foo 缩写时，将输出所有可用的前缀：： webkit， moz， ms and o.。它对眼下所实现的那些前沿的 CSS 属性希罕有效。
假设 Google Chrome 昨天方才实现了 super-foo ，而你如今就想在项目中应用它。可以应用 -super-foo 属性，展开成果如下：
-webkit-super-foo: ; -moz-super-foo: ; -ms-super-foo: ; -o-super-foo: ; super-foo: ;
默认添加前缀属性
在编写 CSS 文件时，也许要查找不带有 vendor 前缀变量的 CSS3 的 “clear” 属性。这会使编写类似 -trf （trf 是 transform 的别号） 如许带有前导连字符的缩写很难堪。
这也是为什么默认景象下 Emmet 会有 css.autoInsertVendorPrefixes 选项的原因。这个属性生效，所有定义在 vendor 分类中的 CSS 属性都将被主动供给匹配的 vendor 前缀变量。
这意味着，无需应用连字符来为已知的 CSS 属性获取有效的前缀变量，直接展开 bdrs 或 trf 缩写就可以获得有效的 vendor 前缀属性。
明白地 vendor 前缀
有时可能会想要输出仅带有指定 vendor 前缀属性的 CSS 属性。
假定想要输出仅带有 webkit 和 moz 前缀的 transform 属性，可以编写如下缩写：
-wm-trf
正如所见到的那样，我们经由过程添加一个字符前缀列表对缩写略作批改。在这种景象下，添加的是 w （webkit） 和 m （moz） 前缀。Emmet 的单字母前缀如下：
w:webkitm:mozs:mso:o
渐变
编写 CSS3 特点的另一个难点是渐变。必须为多个 vendor 前缀多次反复长长地渐变定义。同时，要想覆盖所有支撑渐变的浏览器，就必须应用三种不合的注解：旧的 Webkit，当前支撑 （linear-gradient（top， ...）） 和 W3C-推荐 （linear-gradient（to bottom， ...））。
凡是，用户偏向于应用第三方 GUI 来生成渐变定义，然则在编辑器中做同样的工作会更快。
Emmet 的 CSS3 渐变生成器可以或许帮你分忧：
正像上方显现的那样，可以输入常规地渐变定义如 lg（...） （或 linear-gradient（...）） 函数，并算作一个缩写来展开。若是编写渐变定义来充当属性值，Emmet将解析它并应用它的名字作为新的 CSS 属性的引用。
备用值
在偏爱设置中，可以使 css.gradient.fallback 选项有效，当渐变定义 background-* CSS 属性展开时，产生一个备用的 background-color CSS 属性。这个备用属性将包含来自渐变定义的第一个色彩。
为个选项默认是封闭的，这是因为它所产生的 background-color 值几乎可以必然须要手动进级，以确保这个靠山的内容可读。若是确切不在乎旧浏览器，就可以打开这个选项。
模糊查找
若是查阅 总览表，就会发明有很多 CSS 片段要记忆。并且它们中的一项目组为了分隔逻辑变得很长。
为了使 CSS 的编写更简单，Emmet 为 CSS 片段实现了模糊查找逻辑：每次输入一个未知的缩写，Emmet 老是试图找到类似的片段定义。
例如，作为 ov:h （overflow: hidden;） 缩写的调换，可以输入 ov-h、 ovh 或者干脆输入 oh。拜见下面的示例。演示了 bxz:cb、ovx:h 和 pos:a 片段的不合示例
模糊查找只针对预定义的片段名，不支撑片段值或 CSS 属性。这个成果更好猜测和把握匹配。记住 可以创建本身的片段或重定义已存在的片段 来调剂模糊查找的体验。罗曼·罗兰
