【03】emmet系列之CSS语法

单位：

有几个常用值别名：

p %
e em
x ex

example:

输入:

w100p

输出:

width:100%

example:

输入:

m10p30e5x

输出:

margin:10%30em5ex

example:

输入：

h10p+m5e

输出：

height:10%;margin:5em;

颜色值：

bd5#0s

输出：

border:5px#000 solid

你可以写一个，两个，三个或六个字符的颜色值：

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

！important修饰符

您可以添加!在任何CSS缩写，以便获得最终的后缀!important价值：

p !+ m10e !

输出：

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

浏览器前缀：

如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入

-bdrs

输出：

-webkit-border-radius:;
-moz-border-radius:;
-ms-border-radius:;
-o-border-radius:;
border-radius:;

[魔芋注]在Emmet中我们只需修改旋转属性值的其中一个，再按ctrl+b快捷键，其它相关的属性值也相应的改变。（如果无效，可能与sublime的快捷键冲突，修改之）

比如输入trs，则会生成：

-webkit-transform:;
-moz-transform:;
-ms-transform:;
-o-transform:;
transform:;

输入：

trf

输出：

-webkit-transform:;
-ms-transform:;
-o-transform:;
transform:;

你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo：

-webkit-super-foo:;
-moz-super-foo:;
-ms-super-foo:;
-o-super-foo:;
super-foo:;

如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：

-webkit-transform:;
-moz-transform:;
transform:;

前缀缩写如下：

w 表示 -webkit-

m 表示 -moz-

s 表示 -ms-

o 表示 -o-

`附加属性`

可能你之前已经了解了一些缩写，比如 @f，可以生成：

@font-face {
font-family:;
src:url();
}

一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成，比如输入@f+，将生成：

`模糊匹配`

如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：

overflow: hidden;

`渐变`

输入lg(left, #fff 50%, #000)，会生成如下代码：

background-image:-webkit-gradient(linear,00,100%0, color-stop(0.5,#fff), to(#000));
background-image:-webkit-linear-gradient(left,#fff 50%, #000);
background-image:-moz-linear-gradient(left,#fff 50%, #000);
background-image:-o-linear-gradient(left,#fff 50%, #000);
background-image: linear-gradient(left,#fff 50%, #000);

lg(left,#fc0 30%,red)

输出：

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

border-image:lg(left,#fc0 30%,red)

输出：

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

技巧篇

1，对于一些带有特定的属性值的CSS样式，只需输入CSS标签与属性值的首字母就可以，比如：

fl →float: left;

2，编写这些CSS样式时，有很多是我们想好的写法，但生成的不是你想要的，比如position: absolute;，我们会输入pa，生成的就不是position: absolute;，这时我们可以：

poa → position: absolute;

3，一些用-连接的CSS样式和属性值，都可以取首字母：

whscbs → whitewhite-space-collapse:break-strict;

4，对于有多个属性值的CSS属性，在编写时只需在属性值之间添加-：

m4-6→ margin:4px6px;
p4-6-8→ padding:4px6px8px;

5，属性值没有单位的CSS缩写：

lh2 → line-height:2;, fw400 → font-weight:400;

这些CSS属性有：

z-index, line-height, opacity and font-weight

6，#是一个值分离器，所以不需要使用连字符分隔它，例如：

bd5#0s → border: 5px #000 solid:

7，输出默认的CSS样式+，用+操作符，比如：

bg+→ background:#fff url() 0 0 no-repeat;

巴特西