前端必知的Emmet实用操作

栏目: CSS · 发布时间: 3年前

来源: juejin.im

内容简介:前端必知的Emmet实用操作

本文转载自:https://juejin.im/post/592bdebfac502e006c831d32?utm_source=tuicool&utm_medium=referral,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

哈哈哈,这是第一篇专栏,本文首发于刘星的个人博客

这是一篇介绍Emmet的文章,Emmet是专为我们前端开发人员设计的一个工具,可以大大提高您的 HTML 和CSS工开发效率。可以说是前端开发的神器之一

Emmet简介

作为一个前端,你肯知道在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet(前身为 Zen Coding)。 (当然这是以前的情况,现在作为一个合格的现代编辑器多多少少都集成了代码自动提示,自动补全等功能)

它作为一款强大的插件支持了许多编辑器与IDE,什么vscode,sublime,atom,webstorm等等都支持 你可以直接在你的编辑器插件中搜索安装,一些已自带集成

我们先来看看官网的示例

#page>div.logo+ul#nav>li*5>a{Item $}

在我们用了emmet后 一个 tap 就会生成下面这一大段。酷不酷炫,炫不炫酷

<div id="page">
    <div class="logo"></div>
    <ul id="nav">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>
前端必知的Emmet实用操作
emmet

下面我们直接贴代码来看每一个语法的使用 希望你在看完就会

Emmet 语法

标签

div ⟹ <div></div>

foo ⟹ <foo></foo>

同时Emmet 还采用了css 的元素选择器

后代: >

div>ul>li ⟹ 

<div>
    <ul>
        <li></li>
    </ul>
</div>

兄弟:+

div+p+bq ⟹ 

<div></div>
<p></p>
<blockquote></blockquote>

上级:^

div+div>p>span+em^bq ⟹ 

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

乘法:*

ul>li*5 ⟹ 

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

分组:()

div>(header>ul>li*2>a)+footer>p ⟹ 

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

ID 和 CLASS

div#header+div.page+div#footer.class1.class2.class3
⟹

自定义属性

td[title="Hello world!" colspan=3] ⟹ 

<td title="Hello world!" colspan="3"></td>

自增符号:$

ul>li.item$*5  ⟹ 

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

改变自增基数和方向:@

ul>li.item$@-*5 ⟹ 

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>
ul>li.item$@3*5  ⟹ 

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

文本:{}

a[#]{Click me} ⟹ 

<a href="#">Click me</a>

Lorem Ipsum(乱数假文):lorem

lorem  ⟹ 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique impedit quaeiure quos itaque, deserunt dolore in consequatur veniam cumque, est voluptatibus minima, velit culpa, reprehenderit aspernatur iste facilis. Rerum!

哈哈哈,真棒只要五个字母一个 tap 家可以生成这么大一段站位文字。

ok,差不多这就Emmet 语法的全部了。除了上面的简写形式,Emmet对css也提供有一些简写,下面我们就来看看

Emmet的css支持

css属性

m ⟹ margin: 

fz  ⟹ font-size: 
……

其实这些属性简写都不需要特意去记,你只组要按着你的思路来猜这个属性的简写就好了。

属性值

m10 ⟹ margin: 10px;
mt10  ⟹  margin-top: 10px;
……

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

m4-6 ⟹ margin: 4px 6px;

Emmet默认单位为 px ,如果你想使用其他单位就继续看下面吧

单位

在Emmet中每一个单位都有其缩写形式(当然了你记不住也没关系,直接按全就好)

  • p%
  • eem
  • rrem
  • xex
w100p  ⟹  width: 100%
m10p30e5x   ⟹  margin: 10% 30em 5ex

总结

在这儿,我们大致了解了下Emmet这个神器,学会了基本的使用,关于Emmet的简写,不需要刻意去记忆,因为他的简写方式都很直观,你直接猜也能写对,写不对也没关系,去官网看看就好了 (建议有时间还是粗略的看一些文档) emmet能大大提高我们编码效率,还没用的赶快用起来吧。

抛砖引玉


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

关注码农网公众号

关注我们,获取更多IT资讯^_^


查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

CSS 3实战

CSS 3实战

成林 / 机械工业出版社 / 2011-5 / 69.00元

全书一共分为9章,首先从宏观上介绍了CSS 3技术的最新发展现状、新特性,以及现有的主流浏览器对这些新特性的支持情况;然后详细讲解了CSS 3的选择器、文本特性、颜色特性、弹性布局、边框和背景特性、盒模型、UI设计、多列布局、圆角和阴影、渐变、变形、转换、动画、投影、开放字体、设备类型、语音样式等重要的理论知识,这部分内容是本书的基础和核心。不仅每个知识点都配有丰富的、精心设计的实战案例,而且详细......一起来看看 《CSS 3实战》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码