sublime text--你所不知道的12个秘密

转自：http://blog.csdn.net/laokdidiao/article/details/51429404

package control安装：

第一种方法是在控制台中复制粘贴代码按回车，https://sublime.wbond.NET/installation

第二种办法下载pc文件，百度一下很多方案，这里不详说了

emmet安装：

1、按Ctrl+Shift+P命令板

2、输入PCIC，回车进入Package Control：install

3、输入Emmet和Emmet Css

4、安装完毕以后，C+E就可以快速生成代码了

emmet的语法：

 1、输入“!”或“html:5”，然后按Tab键： 

 

html:5 或!：用于HTML5文档类型

html:xt：用于XHTML过渡文档类型

html:4s：用于HTML4严格文档类型

2、轻松添加类、id、文本和属性

p#foo      补充ID

p.foo       补充类

h1{foo}和a[href=#]     补充为<h1>foo</h1>    <a href="#"></a>

3、嵌套

>：子元素符号，表示嵌套的元素

+：同级标签符号

^：可以使该符号前的标签提升一行

效果如下图所示：

4、分组

(.foo>h1)+(.bar>h2)

生成：

<div class="foo">  
  <h1></h1>  
</div>  
<div class="bar">  
  <h2></h2>  
</div>

5、定义多个元素 *

ul>li*3

6、定义多个带属性的元素

ul>li.item$*3      $代表尾数不同1、2、3

7、Css快捷

1）w100  =》  width: 100px;

2）p 表示%
      e 表示 em    
      x 表示 ex

h10p+m5e   =》  height: 10%;   margin: 5em;

3）@f

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

4）模糊匹配

ov:h、ov-h、ovh和oh

5）供应商前缀

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

1. -webkit-transform: ;
2. -moz-transform: ;
3. -ms-transform: ;
4. -o-transform: ;
5. transform: ;

 

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

1. -webkit-super-foo: ;
2. -moz-super-foo: ;
3. -ms-super-foo: ;
4. -o-super-foo: ;
5. super-foo: ;

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

1. -webkit-transform: ;
2. -moz-transform: ;
3. transform: ;

前缀缩写如下：

• w 表示 -webkit-
• m 表示 -moz-
• s 表示 -ms-
• o 表示 -o-

6）渐变

输入lg(left, #fff 50%, #000)

7）其他参考

http://devework.com/emmets-css.html

https://www.douban.com/note/299285545/?qq-pf-to=pc

转自：http://blog.csdn.net/maxbyzhou/article/details/53220972