|
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解析器，可将此类缩写扩展为完整的CSS属性。
展开m10缩写时会发生以下情况。
首先，它在中寻找m10代码段定义snippets.json。如果找到了，它只是将其作为常规代码片段输出。否则，它将从缩写中提取值。
为了提供最佳的用户体验，解析程序未引入任何特殊的值分隔符：键入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具有一些常用值的别名：
您可以使用别名代替完整的单位：
w100p → width: 100%m10p30e5x → margin: 10% 30em 5ex
颜色值
Emmet支持十六进制颜色值，如下所示：c#3→ color: #333;。该#符号是一个值分隔符，因此您无需使用连字符将其分隔。例如，bd5#0s展开为border: 5px #000 solid：#符号从5和分开颜色，因为s（别名为solid）不是十六进制字符，因此可以在不使用-值分隔符的情况下使用它。
您可以写一个，两个，三个或六个字符作为颜色值：
#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的偏好。
重要修饰符
您可以!在任何CSS缩写的末尾添加后缀以获取!important价值：
p!+m10e!
...将产生
padding: !important;
margin: 10em !important;
由Disqus提供动力的评论
|
