emmet css 缩写

css 缩写

• 对于CSS语法，Emmet有许多用于属性的预定义代码段。例如，您可以扩展 m 缩写以获取margin: ;代码段。
• 要获取 margin: 10px;您可以简单地扩展m10缩写。
• 需要多个值:使用连字符将它们分开：m10-20展开为margin: 10px 20px;。
• 负值：第一个值前面加上连字符，所有其他值后面加上双连字符：m-10--20扩展为margin: -10px -20px;

值和单位

• 默认情况下，当您使用整数值扩展缩写词时，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 → em
• x → ex
  
  您可以使用别名代替完整的单位：
• 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。

!important

您可以在任何CSS缩写的末尾添加!后缀以获取!important价值：

p!+m10e!

padding:  !important;
margin: 10em !important;

浏览器前缀

例如，-bdrs缩写将扩展为

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

明确的供应商前缀

有时您可能只想输出带有指定供应商前缀属性的CSS属性。

假设您只想输出transform带有webkit和moz前缀的属性。在这种情况下，您可以缩写为：-wm-trf

Emmet具有以下一个字母前缀：

• w： webkit
• m： moz
• s： ms
• o： o

渐变色

lg(left, #fc0 30%, red)

background-image: -webkit-linear-gradient(left, #fc0 30%, red);
background-image: -moz-linear-gradient(left, #fc0 30%, red);
background-image: -o-linear-gradient(left, #fc0 30%, red);
background-image: linear-gradient(to right, #fc0 30%, red);

模糊搜索

例如，除了写ov:h（overflow: hidden;）缩写外，您还可以编写ov-h，ovh甚至oh。