emmet插件使用(Css)
渐变
输入lg(left,#fff50%,#000),会生成如下代码
background-image: -webkit-gradient(linear, 0 0, 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);
附加属性
一些其他属性,比如background-image、border-radius、font、@font-face、text-shadow等额外的选项可以通过+号来生成,比如输入@f+,将生成:
@font-face {
font-family: ‘FontName’;
src: url(‘FileName.eot’);
src: url(‘FileName.eot?#iefix’) format(‘embedded-opentype’),
url(‘FileName.woff’) format(‘woff’),
url(‘FileName.ttf’) format(‘truetype’),
url(‘FileName.svg#FontName’) format(‘svg’);
font-style: normal;
font-weight: normal;
}
供应商前缀
如果输入w3c标准的Css属性,emmet会自动加上供应商前缀,比如输入trs,则会生成
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
你也可以在任意属性前加上”-”号,也可以为该属性加上前缀。比如输入-super-foo
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;
如果不希望加上所有的前缀,可以使用缩写来指定,比如-wm-trf表示只jias-webkit和-moz前缀
-webkit-transform: ;
-moz-transform: ;
transform: ;
前缀缩写如下:
w表示-webkit
m表示-moz
s表示-ms
o表示-o
模糊匹配
如果有些缩写,你拿捏不准,emmet会根据你输入的内容匹配最近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的
overflow: hidden;