emmet插件使用(Css)

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;

值

比如要定义元素的宽度，只需要输入w100，即可生成
width:100px;
除了px还可以生成其他单位
h10p+m5e
可生成
height:10%;
margin:5em;
p表示%
e表示em
x表示ex