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，则会生成： 

-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表示只加上-webkit和-moz前缀： 

-webkit-transform: ;
-moz-transform: ;
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