软件系统

Emmet快速编写CSS样式

LensNews

Emmet快速编写CSS样式

Emmet缩写可以快速地生成HTML代码的结构化标签,在我们编写HTML代码时节省了很多时间,提高了工作效率,让前端开发人员也不会感觉太繁琐,今天我们来介绍下Emmet如何快速编写CSS样式。


Sublime Text本身对CSS的编写也提供了相当多的缩写,而且也带有记忆功能,比如写左浮动我们只需输入fll,Sublime Text就会出现提示,回车就可得到标准的float: left;。

有了Emmet就更加快速,编写左浮动只需输入fl。对于CSS样式,Emmet有一个特殊的CSS解析器,有很多预定义的代码片段,例如输入m即可生成margin: ;代码片段。而margin需要赋值,输入m10即可生成margin: 10px;用Emmet编写CSS样式,也是遵循CSS样式的一个基本写法。

基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin。

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

  1. fl → floatleft;  

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

  1. poa → positionabsolute;  

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

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

4、输出默认的CSS样式+,用+操作符,比如:

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

5、参数别名,Emmet为几个常用的单位值提供了别名:

  1. p → %   
  2. e → em   
  3. x → ex  

6、你可以使用别名代替完整的单位:

  1. w100p → width: 100%   
  2. m10p30e5x → margin: 10% 30em 5ex  

7、颜色值,Emmet支持十六进制的颜色值:

  1. c#3 → color#333;  

8、#是一个值分离器,所以不需要使用连字符分隔它,例如:

  1. bd5#0s → border5px #000 solid:   

9、你可以写一个,两个,三个或六个字符颜色值,Emmet都会正确解析为十六进制的颜色值:

  1. #1 → #111111  
  2. #e0 → #e0e0e0  
  3. #fc0 → #ffcc00  

10、属性值没有单位的CSS缩写:

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

这些CSS属性有:

  1. z-indexline-height, opacity and font-weight  

11、!important 修饰符的写法:

在我们编写好了CSS样式,需要添加!important时,只需要在后面输入!(!前需要有空格,因为这是在CSS样式基础上),再按Tab键即可:

  1. floatleft !; → floatleft !important;  

12、在编写Emmet代码时需要添加!important,我们可以这样写:

  1. fl! → floatleft !important;   
  2. p6! → padding6px !important;  

13、对于有多个属性值的CSS属性,在编写时只需在属性值之间添加-:

  1. m4-6 → margin4px 6px;   
  2. p4-6-8 → padding4px 6px 8px;  

14、@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,而@font-face的结构是比较复杂,有background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等属性,用Emmet编写可以让它变得相当的简单,快速,只需输入@f+即可生成:

  1. @font-face {   
  2.     font-family: 'FontName';   
  3.     srcurl('FileName.eot');   
  4.     srcurl('FileName.eot?#iefix') format('embedded-opentype'),   
  5.          url('FileName.woff') format('woff'),   
  6.          url('FileName.ttf') format('truetype'),   
  7.          url('FileName.svg#FontName') format('svg');   
  8.     font-stylenormal;   
  9.     font-weightnormal;   
  10. }  

15、前缀:

CSS3一些新的特性对于我们前端开发人员是一个重要的更新,用几行代码就可以实现强大的功能,这是之前的CSS样式不可能实现的。但这也是一种痛苦,对于不同的浏览器我们需要多次写相同的样式。[/slidenormal]

Emmet的CSS解析器有一个很好的功能,可以大大改善为了解决浏览器兼容性而多次写的属性。例如圆角属性,-bdrs4就可生成:

  1. -webkit-border-radius: 4px;   
  2. -moz-border-radius: 4px;   
  3. border-radius: 4px;  

16、对于一些前缀,Sublime Text中也内置了一些属性的前缀,比如输入trf即可得到:

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

17、在Emmet中,在任意两个字符前面添加-操作符,都可以生成带前缀的属性值,比如-float-d:

  1. -webkit-float-d: |;   
  2. -moz-float-d: |;   
  3. -ms-float-d: |;   
  4. -o-float-d: |;   
  5. float-d: |;  

18、CSS3一个新的、也相当重要的特性是渐变,渐变的属性值又比较复杂,如果再兼容所有的浏览器,代码量是相当大的。而Emmet有一个CSS3渐变的解析器,可以帮我们把这项复杂的工作快速的完成:

  1. lg(left #f90 20% red)  

将生成:

  1. background-image: -webkit-gradient(linear, 0 0, 100% 0, );   
  2. background-image: -webkit-linear-gradient(left #f90 20% red);   
  3. background-image: -moz-linear-gradient(left #f90 20% red);   
  4. background-image: -o-linear-gradient(left #f90 20% red);   
  5. background-image: linear-gradient(left #f90 20% red);  

19、在lg()括号中需要有值,不然Emmet会解析成left: ;。

Emmet编写CSS样式还有很多需要注意的地方,而写出来比较困难,到官方网站看看CSS样式的缩写,会更明白。

Emmet还有很多强大的功能,下次再整理Emmet的高级功能与大家分享。

(0)
Loading收藏(0)

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

LensNews

热评文章

发表评论

CAPTCHA
*

评论: 3 条评论,访客:0 条,博主:0 条 ,当前引用:3 条

当前外部引用:3 条

  • Emmet的高级功能与使用技巧 | 远方的雪山
  • WordPress短代码添加flash | 远方的雪山
  • 使用CSS3 @font-face模块打造自定义个性化WEB字体 | 远方的雪山