Web Front End

【译】利用Emmet来提高你的CSS编码速度

大多数关于Emmet的文章和教程都是在说明它对HTML的处理能力,但是今天我们要来关注一下Emmet的CSS部分。准备好来增强你的CSS手写能力了吗?让我们开始吧!

:在你阅读下面的部分之前,建议你先对CSS有一定的了解。


Emmet是什么?

Emmet采用文本缩写的方法,集合了不同的缩写,并且扩展为对应的html/xml/css。访问 下载页面 ,并为你的编辑器安装Emmet。

在使用Emmet编写代码时,输入适当的缩写,然后按下Emmet的功能键。在Sublime Text中,是TAB键。你正在处理的文件的语法将决定使用哪些缩写。

为什么要使用Emmet?

Emmet使用符合常识的缩写来简化编写代码的过程。它可以起到多大的作用,取决于你投入了多少时间去学习它的来龙去脉。

Emmet(以前叫做Zen Coding )是一个面向Web开发者的工具,它可以大大加快你的HTML和CSS的工作流程。
它不仅可以节省你的时间,还可以使编写代码的过程更加轻松愉快。只要输入很少的字符,然后看着它们神奇地扩展为格式完美的代码!如果产生了一些错误,撤销按钮可以将扩展后的代码变回原本的缩写形式,这样你就可以再次编辑并且将它扩展。

我同时还发现Emmet让我更加轻松地记住了代码。缩写毫无疑问更加易于记忆。 text-transform:对应 “tt” 和 text-align:justify; 对应 “taj” 。可以看到这会有多大的帮助。你将开始学习新的CSS属性并且只需要记住它的缩写。你甚至不需要担心分号和空格,Emmet为你解决这些事情!


Emmet和CSS

让我们来看看Emmet的CSS缩写的基本构成,以及它如何加快工作流程。

属性(Properties)

CSS对属性赋予相应的值,如 font-size,margin,padding,等等。

css-best-property-value

取自学习CSS的最佳方法

Emmet对每个已知的CSS属性定义了一个缩写。因此, border-bottom 就是 bdb , border-top 就是 bdt 。下面这个例子是 font-size ,也就是 fz 。

键入缩写之后,按下功能键(我的配置,TAB)和Emmet会神奇地将缩写扩展为有效的CSS,并且将光标移动到你会需要继续输入的地方。

Properties

值(Values)

现在我们已经了解了属性,是时候添加一个值了。这是通过键入缩写与所需的值的组合来完成的。例如,fz18 将会输出 “font-size: 18px; 。你不需要输入”px”,因为Emmet会默认添加它。如果一个项目没有单位(如 font-weight ),Emmet也足够聪明地知道不要添加 px。

Values

单位(Units)

如果你并不都是使用像素怎么办?em , rem , % , ex ,和 px 这些单位都可以在Emmet中使用。每个单位也有一个缩写形式(虽然这看起来可能有点极端):

  • px → 默认
  • p → %
  • e → em
  • r → rem
  • x → ex
    要使用一个单位,只需值的末尾加上单位的缩写。下面的例子是用单位 em 定义一个字体大小

Units

多个单位(Multiple Units)

某些属性,比如 margin ,允许多个值。要用Emmet做到这一点,就用破折号(-)分隔每一个值。来看看下面这个例子,它给 body 定义 margin 的四个值。

Multiple Units

颜色(Colors)

Emmet要求你在前面加上# ,而不是将加到值的末尾。所以 # 紧跟在你的属性后面,在值的前面。不同的字符数输出不同的十六进制代码。来看一些例子:

  • #1 → #111111
  • #e0 → #e0e0e0
  • #fc0 → #ffcc00
    下面是定义 body 颜色的一个例子,使用 #111 ( c#1 ):

Colors

!important

尽管 !important 标签不应该经常使用,Emmet 还是提供了它,为防万一。添加一个感叹号 ! 到你的缩写,像这样:

!important

多个属性(Multiple Properties)

现在,我们对Emmet的CSS功能的有了一个基本的了解,是时候开始把它们结合起来。像类似类似处理HTML的方式,你可以给它们每一个都添加一个加号(+)。请记住,如果你遇到了问题,你可以随时撤销并修改字符串。

写出你的所需的每一个属性和值,用 + 分隔它们,然后按下功能键来查看结果。

下面是为 body 定义不同的 margin 和 padding 的一个例子。

Multiple Properties

例子

记住,你可以组合或者独立地使用所有这些缩写。这不是关于怎样一次就使用Emmet写出正确地代码,只是让你更容易编写你的CSS。为了总结这些很酷的GIF动画,这里有个一个例子,快速创建一个 class 为panel 的 div。

例子

结论

Emmet是一个强大的工具。被一些人称为“高速”的编码工具,它可以让你花更少的时间一遍又一遍地写同样的代码,而无需手动创建自己的代码段。Emmet的灵感来自于CSS选择器,并且可以在所有主流的编辑器中使用,以适应任何开发者的工作流程。

请记住,你添加到你的工作流的任何新工具都会有一个学习曲线,但不要花费比你需要弄清楚它是如何为你工作这个过程更多的时间。定期查看文档是一个很好的复习,同时Emmet提供了一个 cheat sheet ,囊括了所有可用的功能。这是为了帮助你少一些思索,同时写更多的代码而建的!

相关链接

Original Page : Turbo-Charge Your CSS With Emmet