Emmet:html/css Code Quick Authoring Artifact

The predecessor of Emmet is Zen coding, which uses the syntax of an imitation CSS selector to generate code that greatly improves the speed of html/css code writing.

Emmet Official website: http://www.emmet.io/

For coding Demo

1. Initialize

HTML documents need to contain some fixed tags, such as

Html:5 or!: for HTML5 document types

HTML:XT: For XHTML transition Document types

Html:4s: For HTML4 Strict document types

2. Easily add classes, IDs, text, and attributes

Continuous INPUT element names and Id,emmet will be automatically complete for you, such as input p#foo:

Successive input classes and IDs, such as P.bar#foo, are generated automatically:

<p class= "Bar" id= "foo" ></p>

Here's a look at how to define the content and properties of HTML elements. You can automatically generate the following code by entering H1{foo} and a[href=#]:

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

3. Nesting

Now you just need 1 lines of code to implement the nesting of tags.

: A child element symbol that represents a nested element

+: Sibling tag symbol

^: You can raise the label in front of the symbol by one line

The effect is as follows:

4. Grouping

You can quickly generate blocks of code by nesting and parentheses, such as input (. foo>h1) + (. bar>h2), which automatically generates the following code:

<div class= "foo" >
</div>
<div class= "Bar" >
</div>

5. Implicit tags

Declare a tag with a class, just enter Div.item, generate <div class= "item" ></div>.

In previous versions, you can omit the Div, which is the input. Item to generate <div class= "item" ></div>. Now if you enter only. Item, Emmet is judged based on the parent tag. For example, entering. Item in <ul> will generate <li class= "item" ></li>.

Here are all the implicit tag names:

Li: Used in UL and OL

TR: For table, Tbody, THEAD, and Tfoot

TD: Used in TR

Option: for Select and Optgroup

6. Define multiple elements

To define multiple elements, you can use the * symbol. For example, UL>LI*3 can generate the following code:

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

7. Define multiple elements with attributes

If you enter ul>li.item$*3, the following code will be generated:

<ul>
<li class= "Item1" ></li>
<li class= "Item2" ></li>
<li class= "Item3" ></li>
</ul>

Second, the CSS abbreviation

1. Value

For example, to define the width of an element, simply enter w100 to generate

width:100px;

In addition to PX, other units can be generated, such as input h10p+m5e, the result is as follows:

height:10%;
Margin:5em;

List of unit aliases:

p =%

E means EM

X means ex

2. Additional Properties

Maybe you've already learned some abbreviations, such as @f, that you can generate:

@font-face {
Font-family:;
Src:url ();
}

Some additional options, such as Background-image, Border-radius, Font, @font-face,text-outline, Text-shadow, etc., can be generated by the "+" symbol, such as input @f+, will be generated:

@font-face {
font-family: ' FontName ';
Src:url (' Filename.eot ');
Src:url (' Filename.eot #iefix ') format (' Embedded-opentype '),
URL (' filename.woff ') format (' Woff '),
URL (' Filename.ttf ') format (' TrueType '),
URL (' filename.svg#fontname ') format (' SVG ');
Font-style:normal;
Font-weight:normal;
}

3. Fuzzy matching

If you are unsure of some abbreviations, Emmet will match your input to the closest syntax, such as input ov:h, ov-h, OVH, and oh, and the generated code is the same:

Overflow:hidden;

4. Vendor prefix

If you enter a non-standard CSS property, Emmet will automatically add a vendor prefix, such as entering TRS, to generate:

-webkit-transform:;
-moz-transform:;
-ms-transform:;
-o-transform:;
Transform:;

You can also prefix any property with a "-" symbol, or you can add it to the attribute. such as input-super-foo:

-webkit-super-foo:;
-moz-super-foo:;
-ms-super-foo:;
-o-super-foo:;
Super-foo:;

If you do not want to add all the prefixes, you can use abbreviations to specify, such as-WM-TRF to add only the-webkit and-moz prefixes:

-webkit-transform:;
-moz-transform:;
Transform:;

The prefix is abbreviated as follows:

W indicates-webkit-

M represents-moz-

s represents-ms-

O indicates-o-

5. Gradients

Entering LG (left, #fff 50%, #000) generates the following code:

Background-image:-webkit-gradient (linear, 0 0, 100% 0, Color-stop (0.5, #fff), to (#000));
Background-image:-webkit-linear-gradient (left, #fff 50%, #000);
Background-image:-moz-linear-gradient (left, #fff 50%, #000);
Background-image:-o-linear-gradient (left, #fff 50%, #000);
Background-image:linear-gradient (left, #fff 50%, #000);

Third, additional functions

Generate Lorem Ipsum text

Lorem ipsum refers to a Latin article commonly used in the field of typography, the main purpose of which is to test the effect of an article or text in different font and version types. With Emmet, you can simply enter Lorem or lipsum to generate the text. You can also specify the number of words, such as LOREM10, that will be generated:

Reference

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero Delectus.

Iv. Customization

You can also customize the Emmet plugin:

• To add a new abbreviation or update an existing abbreviation, you can modify the Snippets.json file

• Change the behavior of Emmet filters and actions to modify the Preferences.json file

• Define how to generate HTML or XML code to modify the Syntaxprofiles.json file

v. Plugins for different editors

Emmet supports the following editor (linked to the Emmet plugin for the editor):

• Sublime Text 2

• TextMate 1.x

• Eclipse/aptana

• Coda 1.6 and 2.x

• Espresso

• Chocolat (added via the "Install Mixin" dialog box)

• Komodo Edit/ide (added via tools→add-ons menu)

• notepad++

• PSPad

• <textarea>

• Codemirror2/3

• Brackets

Related documents: http://docs.emmet.io/(which contains a demo, you can experiment with the abbreviations mentioned in the article)

Via Smashingmagazine