Emmet:编写HTML+CSS必备的插件

文章目录

认识Emmet

我是最近安装Sublime Text2才接触到zen coding插件方面的知识。刚开始从网上看到都是说安装zen coding 这个插件,但是我安装了之后,发现用不了。后来才知道这个插件已经没有更新了,已经替换为另外一个插件了,它就是我今天要说的Emmet了。

一款强大的集HTMLHTML5)+CSScss3)缩写的插件,安装了这个插件之后,前端写代码的速度应该能够提高几倍吧。虽然说码字这点时间相对于思考来说不怎么样,但是还是挺让人感到兴奋。我相信你看到这款插件的功能,一定会非常高兴的。

强大的Emmet

下面引用youtube(请自行准备梯子)上Emmet作者的视频介绍:

在大名鼎鼎的SmashingMagazine上有一篇详细的文章介绍使用这些缩写方式:Goodbye, Zen Coding. Hello, Emmet!访问

若有爱,可以访问作者的博客:http://chikuyonok.ru

若已爱上,你可以访问插件的主页:http://emmet.io/

Emmet的HTML属性缩写

  • html:5 or ! for an HTML5 doctype
  • html:xt for an XHTML transitional doctype
  • html:4s for an HTML4 strict doctype

Emmet Demonstration - Initializers

p.bar#foo

Emmet Demonstration - Classes and IDs

a[href=#]

Emmet Demonstration - Texts and Attributes

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

Emmet Demonstration - Grouping

ul>li*3

Emmet Demonstration - Multiplication

Emmet的CSS属性缩写

w100

Emmet Demonstration - Values

h10p+m5e

height: 10%; margin: 5em;

ov:h and ov-h and ovh and oh

Emmet Demonstration - Fuzzy Search

trs

Emmet Demonstration - Vendor Prefixes

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

Emmet Demonstration - Gradients

文字补全

lorem10

Emmet Demonstration - Lorem Ipsum

以下内容来自这里,本想照着文档来写一篇中文文档的,发现官方的文档都已经是st3的版本了,快捷键大部分都已经改了。你也可以在这里看更多的快捷键

1、生成 Lorem Ipsum

这是什么?之前接了一些国外的单子,发现内容填充都是相同的一段文字:只需要输入lorem然后加tab,或者lorem*10/lorem10这样子,就会生成一个无意义的文字了。

2、进行数学算术

数学算术?有人会问,这个有什么用,特别是对于前端来说。其实这个功能在做响应式网页开发时就能派上用场。

做过响应式开发的人都知道,流动布局的精髓就是把所有的宽度值尽量都换成精确的百分比。没错,注意“精确”,有时候除出来的结果,不是心算可以出来的,这时候这个功能就比较方便了,直接在代码编辑器里进行计算,就不用打草稿,或者打开计算器了。

快捷键是: ⇧⌘Y(苹果) / Shift+Ctrl+Y(Windows),具体演示看官网 DEMO:http://docs.emmet.io/actions/evaluate-math/

3、快速移除标签

往往要删除一个HTML标签,如果中间有一大段内容,就会感觉不方便,要拖动屏幕,要点光标,要选择,然后还要按下 Backspace ,很麻烦有木有!

Emmet 贯标停在标签上,一个快捷键就搞定了:⌘’ / Shift+Ctrl+;

官方 Demo :http://docs.emmet.io/actions/remove-tag/

同样的,重命名标签,另一个快捷键:⇧⌘K / Shift+Ctrl+’

4、自动添加图片的尺寸大小

往往图片需要添加尺寸的,不管是使用 img 标签,还是通过 CSS 添加背景图片,不然bug会很多,但是每次添加尺寸,很麻烦,都要找到这张图片然后看看图片大小,然后再填写 width、height 。

现在有了Emmet,只要填写上图片地址,将光标放在图片地址上,一个快捷键统统搞定:⇧⌃I / Ctrl+U

官方 Demo :http://docs.emmet.io/actions/update-image-size/

5、自动映射更新 CSS 的属性值

自动映射更新 CSS 的属性值?这个什么意思呢?举个例子,通常为了使用 CSS3 ,就不得不考虑各个浏览器的私有属性,都要各写各的:

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);

这么多,写起来太麻烦了,使用 Emmet ,(以上面为例)你只需要写一个 transform ,然后按下 Tab 键;

如果要更改属性值怎么办,只需该其中一个值,然后按快捷键:⇧⌘R / Shift+Ctrl+R

是不是太方便额!

6、将图片资源转换成 data url 形式

什么是 data url ?data url 是针对于一些小的数据,可以在网页中直接嵌入,而不是从外部文件载入,比如图片。这样的好处是可以减少一次http的请求,缺点是使得页面内容变大。兼容 性方面,大部分是支持的,但是 IE系列(6~8) 都不支持或者支持的不好,鄙视一下IE。

将图片转为 data url 一般的用工具,然后再粘贴过来,现在使用 Emmet ,将光标移动到 background: url() 中的图片位置的地方,一个快捷键瞬间转换:⇧⌃D / Ctrl+’

Emmet支持以下的编辑器,看看能否找到你的

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:Emmet:编写HTML+CSS必备的插件 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/emmet.html)

发表评论

请登录后发表评论:

“Emmet:编写HTML+CSS必备的插件”有2个评论

  1. 链接通知 : 编写HTML+CSS必备的插件Emmet(大名鼎鼎的zen coding改进) - icsscn前端开发
  2. 酷剑

    欢迎使用。

    登录回复