emmet之css语法_使用Emmet加快HTML和CSS的生产

emmet之css语法

Emmet (formerly Zen Coding) is best described as a set of macros and keyboard shortcuts for rapid web development. Available as a free download and plugin for over a dozen popular editors, Emmet potentially doubles the production speed of web pages if used consistently. In this article, I’ll take you through installing, using and customizing Emmet to gain maximum results.

最好将Emmet (以前称为Zen Coding)描述为用于快速Web开发的一组宏和键盘快捷键。 Emmet可作为免费下载和插件供十几个流行的编辑器使用，如果一贯使用，Emmet可能使网页的生产速度加倍。 在本文中，我将指导您完成安装，使用和自定义Emmet以获得最大的效果。

Most modern code editors already have built in macros of one kind or another, auto-closing tags and pre-formatting them with typical attributes; Emmet just takes that several steps further. It also has the advantage of being consistent across all platforms and editors: rather than learning a new set of shortcuts when you move from one application to another, you can consistently use Emmet syntax for the quick generation of code.

大多数现代代码编辑器已经内置了一种或另一种宏，可以自动关闭标签并使用典型属性对其进行预格式化； Emmet只是将这几步进一步。 它还具有在所有平台和编辑器上保持一致的优点：当您从一个应用程序迁移到另一个应用程序时，与其学习新的快捷方式集，还可以一致地使用Emmet语法来快速生成代码。

安装 (Installation)

Emmet is supported on more than a dozen different editors, with slightly different installation for each; consult the documentation for your editor of choice.

Emmet支持十多种不同的编辑器，每种编辑器的安装都略有不同。 请查阅您选择的编辑器的文档。

使用Emmet进行生产 (Using Emmet For Production)

Once Emmet is installed, it’s good to go. Aside from the easy-to-remember shortcut syntax, you have to keep just two things in mind:

一旦安装了Emmet，那就很好了。 除了易于记忆的快捷方式语法外，您还需要记住两点：

• Adding spaces in Emmet syntax will cause shortcuts to fail
  用Emmet语法添加空格将导致快捷方式失败

• You must use the appropriate keyboard shortcut to expand Emmet syntax after you complete typing the code (Control-E)

  完成键入代码( Control-E )后，必须使用适当的键盘快捷键来扩展Emmet语法。

All right. Let’s say that you’ve started a page with the boilerplate or template of your choice. First, you want to work on the navigation. Typically this would involve typing out a series of nested tags: in HTML5, a <nav> element, <ul> and series of <li> tags with links inside them. With Emmet, we can just type this:

行。 假设您已经使用所选的样板或模板开始了一个页面。 首先，您要进行导航。 通常，这需要输入一系列嵌套标签：在HTML5中，是一个<nav>元素，一个<ul>和一系列带有链接的<li>标签。 使用Emmet，我们可以输入以下内容：

nav>a*5

Which, after pressing Control + E, Emmet magically expands to:

在按下Control + E之后 ，Emmet神奇地扩展为：

<nav>
	<a href=""></a>
	<a href=""></a>
	<a href=""></a>
	<a href=""></a>
	<a href=""></a>
</nav>

Pretty neat, right?  Emmet intelligently uses CSS-style selectors in your HTML code to generate nested elements, with the addition of multipliers for recursion.

很整洁吧？ Emmet在您HTML代码中智能地使用CSS样式的选择器来生成嵌套元素，并增加了递归乘数。

You can use the same technique to generate tables very quickly:

您可以使用相同的技术非常快速地生成表：

table>tr*3>td*5

… which will create a three row, five column table.

……这将创建一个三行五列的表格。

But wait, we can do better! By grouping elements in Emmet syntax, we can nest tags together:

但是，等等，我们可以做得更好！ 通过使用Emmet语法对元素进行分组，我们可以将标签嵌套在一起：

section>(article*2>>h2+p+a{Read more…})

Expands to:

扩展为：

<section>
	<article>
		<p></p>
		<a href=""></a>
       </article>
	<article>
		<p></p>
		<a href=""></a>
       </article>

Or try this:

或尝试以下方法：

table>(thead>tr>th*5)(tbody>tr>td*5)

…which will produce a table with a header and data row.

…将产生一个带有标题和数据行的表。

We can also use the equivalent of the CSS adjacent sibling selector to create a series of elements one after the other:

我们还可以使用与CSS 相邻兄弟选择器等效的元素，一个接一个地创建一系列元素：

header+main+footer

Creates:

创建：

<header></header>
<main></main>
<footer></footer>

There are many more possible combinations, but the bottom line is this: you can create the base markup for a page in just a few keystrokes, rather than laboriously entering tags.

还有更多可能的组合，但是最重要的是：您只需单击几次即可为页面创建基本标记，而不必费力地输入标签。

产生填料含量 (Generating filler content)

You can use Emmet to quickly generate filter content. Simply expand the keywords lorem or ipsum to create lorem ipsum filler text. Braces denote specialized filler text: for example, to fill a series of null links with the word “Link”:

您可以使用Emmet快速生成过滤器内容。 只需扩展关键字lorem或ipsum即可创建lorem ipsum填充文本。 大括号表示专用的填充文本：例如，用单词“ Link”填充一系列空链接：

nav>a[href=#]{Link})*5

Creates:

创建：

<nav>
	<a href="#">Link</a>
	<a href="#">Link</a>
	<a href="#">Link</a>
	<a href="#">Link</a>
	<a href="#">Link</a>
</nav>

超级懒惰CSS (CSS For The Super-Lazy)

If you’re working in a stylesheet, Emmet can make life much easier. For example, rather than typing:

如果您使用的是样式表，Emmet可以使工作更加轻松。 例如，而不是键入：

margin: 2rem;

With Emmet installed, we can type:

安装Emmet后，我们可以输入：

m2r

Which, after applying the Emmet keyboard combo, expands to the same thing.

应用Emmet键盘组合后，它可以扩展为同一对象。

There are hundreds of such shortcuts for Emmet. The nice part is that you don’t have to use them all at once, or even any of them: the plugin will remain inactive until you use a shortcut and call on it.

Emmet有数百种这样的快捷方式 。 令人高兴的是，您不必一次全部使用它们，甚至不必使用其中的任何一个：插件将保持不活动状态，直到您使用快捷方式并对其进行调用为止。

选择标签而不是文本 (Select tags rather than text)

Selection options in many IDEs is more akin to word processors than the needs of code editors. Emmet boasts of number of features to make selection of HTML and CSS content easier: rather than gripping and moving a mouse, a few repeated keystrokes can select units of code for editing, copying or deletion.

与代码编辑器的需求相比，许多IDE中的选择选项更类似于文字处理器。 Emmet拥有许多使选择HTML和CSS内容更加容易的功能：无需握住和移动鼠标，一些重复的击键可以选择代码单位进行编辑，复制或删除。

Emmet和像SASS这样的预处理器有什么区别？ (What’s the difference between Emmet and pre-processors like SASS?)

Pre-processors and frameworks map to a target language, but with one important difference: in a pre-processor, the original code is kept, and interpreted/expanded only at runtime. In other words, you work on a SASS document as SASS: it doesn’t automagically expand to CSS as you type. This provides some advantages: it’s easier to go back to the beginning and make a small alteration to the original shortcut code that produces sigificant changes to the output. This power usually comes with some added complication and performance issues.

预处理程序和框架映射到目标语言，但有一个重要区别：在预处理程序中，原始代码将保留，并且仅在运行时解释/扩展。 换句话说，您以SASS的方式处理SASS文档：键入时，它不会自动扩展为CSS。 这提供了一些优点：可以更轻松地回到开始并对原始的快捷方式代码进行较小的更改，从而对输出进行重大更改。 这种功能通常会带来一些额外的复杂性和性能问题。

It might be fair to think of Emmet as a gateway to pre-processors: a way of abstracting the creation of markup and CSS without the more complex setup demanded by something like SASS.

可以将Emmet视为通向预处理程序的网关是很公平的：一种抽象标记和CSS创建方式的方法，而无需诸如SASS之类的更复杂的设置。

结论 (Conclusion)

After working in Emmet for some time, I can’t believe I ever lived without it. Emmet’s macros are not a shortcut for learning HTML or CSS: you still have to go through the process of understanding what the languages are, and their syntax. But if you’ve already been coding for a year or so and want to increase your efficiency significantly without battling a learning curve, you can easily grasp the basics of Emmet from the excellent online documentation in an hour or two. After that point, it’s just a question of using the new shortcuts to dramatically cut your time in delivering new code.

在Emmet工作了一段时间后，我简直无法相信没有它。 Emmet的宏并不是学习HTML或CSS的捷径：您仍然必须经历理解语言及其语法的过程。 但是，如果您已经进行了大约一年的编码，并且希望在不影响学习曲线的情况下显着提高效率，则可以在一两个小时内从出色的在线文档中轻松掌握Emmet的基础知识。 在那之后，使用新的快捷方式来大大减少交付新代码的时间只是一个问题。

翻译自: https://thenewcode.com/714/Accelerate-Your-HTML-and-CSS-Production-With-Emmet

emmet之css语法