Emmet 插件几乎为所有的 CSS 属性都创建了缩写形式,使用这些缩写形式可以快速的撰写 CSS 样式。
比如,margin 这个属性,它的缩写形式就是一个 m …
在缩写形式后面可以直接加上属性的值 .. m20 … 如果不加单位的话,默认的单位就是像素 …
我们也可以加上单位的名称 …. 比如 m20em …
如果是百分比的值,可以使用一个 % ,或者字母 p …
CSS 属性可能会有多个值,不同的值之间我们可以使用 - 线分隔一下 …
m20-30
有两个快捷键,可以快速的选择上一个或者下一个项目 … shift+command+, 可以选择上一个项目 …
按一次先选择的是最后一个属性的值 … 然后是上一个值 … 然后是整个值 … 接着是整个样式声明 …
最后会选择样式的选择器 …
shift+command+.
可以选择下一个项目 …
其它
Emmet 定义的属性的缩写我们一般都能猜到 … 比如,上外边距,属性名是 margin-top … 它的缩写形式应该就是 mt …
下外边距是 margin-bottom … 它的缩写是 mb …
ml 是 margin-left 的缩写 … mr 是 margin-right 的缩写 …
:
有些有固定值的属性,可以使用属性的缩写形式,后面加上冒号,然后是值的缩写形式 … 比如 position 这个属性 … 设置为 absolute 的话,输入 pos:a
浮动元素到左边,可以使用 float 属性,把它的值设置成 left .. fl:l
fl 是 float 的缩写,冒号后面的 l 是 left 的缩写 …
+
有些缩写形式里有一个 + 号 … 比如 bd+
编辑的地方是在这个边框的宽度值这里 … shift+command+↑ 可以给值加上 1 … windows 上应该 shift+command+↓ … 可以减掉 1 ….
想了解更多的缩写形式的 CSS 属性,可以参考 Emmet 的 cheat sheet … 备忘列表!