CSS Emmet

Mr.Hope ... 2019-09-03 Emmet
  • 快捷键
  • HTML
大约 2 分钟

对于 CSS 语法,Emmet 为属性提供了许多预定义的代码段。

# 添加属性

您可以使用缩写来生成 CSS 属性。如 m 会生成 margin: ;,同时光标会自动置于值处。

# 同时添加属性与值值

您可以将值直接输入缩写的后面,如果有多个值,你需要用 - 将它们分开,多余的 - 将会被理解为负值。

案例

  • m10: margin: 10px;
  • m10-20: margin: 10px 20px;
  • m-10--20: margin: -10px -20px;

注意

请只有在必要(不添加会产生歧义)的情况下添加 - 分隔符,否则 Emmet 可能会错误的理解它。

# 值的单位

使用整数值扩展缩写时,Emmet 会以 px 单位输出: m10margin: 10px;

使用浮点值扩展缩写时,会以 em 单位输出: m1.5margin: 1.5em;

你也可以在值后面紧跟任何字母字符,来显式提供单位名称: m1.5exmargin: 1.5ex;m10foomargin: 10foo;

明确定义单位后,不再需要使用连字符来分隔值: m10ex20emmargin: 10ex 20em;m10ex-5margin: 10ex -5px;

# 值别名

Emmet 具有一些常用值的别名:

  • p%
  • eem
  • xex

您可以使用别名代替完整的单位:

  • w100pwidth: 100%
  • m10p30e5xmargin: 10% 30em 5ex

# 颜色值

Emmet 支持十六进制颜色值。# 将自动作为分隔符,所以针对颜色变量,将不再需要 -

  • c#3color: #333;
  • bd5#0sborder: 5px #000 solid。(#符号可将颜色与 5 分隔开,并且 s(别名为 solid)不是十六进制字符,因此省略了 -

颜色变量支持 1-3 位的缩写,表现如下:

  • #1#111111
  • #e0#e0e0e0
  • #fc0#ffcc00

# 无单元属性

一些 CSS 属性默认为无单位输出:

  • lh2line-height: 2;
  • fw400font-weight: 400

这些值是: z-indexline-heightopacityfont-weight

# 重要修饰符

您可以在任何 CSS 缩写的末尾添加 ! 后缀来添加 !important

p!+m10e!:

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

# 输出多个属性

正如上方演示,你可以利用 + 同时输出多个 CSS 属性。

Snippets

完整的 CSS snippets 请见 Emmet Repo (opens new window)