Kano个人技术博客前端开发省时利器“emmet插件”之css及特殊用法

kano个人技术博客 web前端开发 1,008 次浏览 没有评论

上一篇文章kano个人博客介绍了emmet在快速生成html方面的应用,体验到了emmet的方便之处,然而很多人不知道,emmet还可以快速的生成css代码!本篇就来讲一下它在css中的用法。

emmet还有一些特殊用法,虽然也属于生成html类的,但和普通的生成html方式却略有区别,本篇也会介绍一下。

emmet插件

一、CSS中的emmet

1. 属性名缩写

大家知道,emmet的理念是:用最少的代码表达出你想要的东西,然后一键生成它。css并有什么复杂的结构,只是一个一个的属性,用法实际比html要简单的多。

.wrap {
   h
   w
   height: ;
   width: ;
 }

 上例,对于像width或者height这种非常常见的属性,只要输入一个字母然后按下tab,完整的属性名就出来了。

2. 属性名&

.wrap {
   h30
   w100
   height: 30px;
   width: 100px;
 }

不止是属性名,连带属性值也可以缩写!如上例,“h30”直接展开成了“height: 30px;”,非常的智能。

3. 单位

大家可能发现了:上面的“h30”的单位默认展开为了px,但我们也会需要其他的单位,emmet同样对它们有相应的缩写:

h100p
 h100e
 h100r
 h100x
 height: 100%;
 height: 100em;
 height: 100rem;
 height: 100ex;

同样的,单个字母展开成对应的单位,当然如果单位是px的话则可以省略。

4. 非数字值的属性值

css中还有很多不是数字值的属性值,它们在emmet中是怎样缩写的呢?

c:#fff
 color: #ffffff;
 o:h
 overflow: hidden;
 oh
 overflow: hidden;

可以用“:”将属性名和属性值的缩写隔开,不过连在一起也没有关系。

5. 特殊展开

对于一些常见的属性值,emmet提供了一些特殊展开的方式:

c
 color: #000;
 bd+
 border: 1px solid #000;

如上面,打一个c就顺便生成了一个黑色的默认值;打“bd+”则生成了一个1px的黑色实心边框。此类的展开属于固定用法。

6. 浏览器前缀

对于css3中一些比较新的属性,emmet在展开的时候会同时生成几个带浏览器前缀的属性,以保证兼容性:

bz
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

emmetcss中的用法就是这些,其中的难点在于缩写——他们都是固定的,所以需要大家去记忆一下,但css中常用的属性也并不多,实际上用过一天之后大多数的属性就可以记住了。附一下emmet的官方cheat-sheet,里面包含了所有的css展开: https://docs.emmet.io/cheat-sheet/

二、特殊用法

这里的内容其实也是属于生成html的,只不过类似css中的特殊展开,这里的展开没有前篇讲的那些规律,是一些特殊用法,但是如果记住的话使用也很方便。

1. 一键生成html5文档

!
 <!doctype html>
 <html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
 </head>
 <body>

一个“!”生成html5文档!是不是很惊艳!不过一般的编辑器中在新建html文档的时候也会生成这些内容,所以实用性其实不是很大,但是很酷炫。

2. input类型

emmet提供了一种方法可以快速生成对应类型的input:

input:hidden
 <input type="hidden" name="">
 input:text
 <input type="text" name="" id="">
 input:c
 <input type="checkbox" name="" id="">

:”后面写对应的类型,就可以生成对应类型的input了,比起“input[type=text]”更加方便了。

还有一些其他的html标签,还有带属性值的简便写法:

meta:utf
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

3. 更短的简写

btn
 <button></button>
 art
 <article></article>
 adr
 <address> </address>
 ul+
 <ul>
   <li></li>
 </ul>

简直懒人专属。

emmet介绍完毕,相信大家在写css的时候也可以省下2/3的书写量了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Go