Emmet plug-in: Quick compilation of HTML/CSS code, emmetcss

Emmet plug-in: Quick compilation of HTML/CSS code, emmetcss

 

 

The predecessor of Emmet plug-in is the famous Zen coding. If you are engaged in Web Front-end development, the plug-in will not be unfamiliar. It uses the syntax similar to the CSS selector to generate code, greatly improving the speed of HTML/CSS code writing, as shown in the following Demonstration:

The plug-in has been renamed Emmet.However, Emmet not only changed its name, but also brought some new features. This article will give you an intuitive demonstration. 

I. Quick coding of HTML code 

1. Initialization 

HTML documents must contain some fixed tags, such as

• Html: 5 or! : Used for HTML5 document types
• Html: xt: used for XHTML transition document type
• Html: 4 s: For HTML4 strict Document Type

2. easy addition of classes, IDs, text, and attributes 

Enter the element name and ID consecutively. Emmet will automatically complete the request for you. For example, enter p # foo:

Consecutive input classes and IDs, such as p. bar # foo, are automatically generated:

Html code

1. <P class = "bar" id = "foo"> </p>

The following describes how to define the content and attributes of HTML elements. You can enter h1 {foo} and a [href = #] to automatically generate the following code:

Html code

1. <H1> foo
2. <A href = "#"> </a>

 

3. nesting 

Now you only need one line of code to implement tag nesting.

• >: Child element symbol, indicating nested Elements
• +: Same-level label symbol
• ^: The label before the symbol can be upgraded to a row

Shows the effect:

4. Group 

You can use nesting and parentheses to quickly generate some code blocks, such as input (. foo> h1) + (. bar> h2). The following code is automatically generated:

Html code

1. <Div class = "foo">
2. <H1>
3. </Div>
4. <Div class = "bar">
5. <H2>
6. </Div>

 

5. Implicit tag 

Declare a label with a class. You only need to input div. item to generate <div class = "item"> </div>.

In previous versions, you can omit div, that is, enter. item to generate <div class = "item"> </div>. If only. item is input, Emmet determines Based on the parent tag. For example, if you enter. item in <ul>, <li class = "item"> </li> is generated.

The following are all implicit tag names:

• Li: Used in ul and ol
• Tr: Used in table, tbody, thead, and tfoot
• Td: Used in tr
• Option: Used in 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:

Html code

1. <Ul>
2. <Li> </li>
3. <Li> </li>
4. <Li> </li>
5. </Ul>

7. Define multiple elements with attributes 

If ul> li. item $ * 3 is entered, the following code is generated:

Html code

1. <Ul>
2. <Li class = "item1"> </li>
3. <Li class = "item2"> </li>
4. <Li class = "item3"> </li>
5. </Ul>

// Of course you can change it to ul> li # item $ * 3. The result is as follows:

<Ul>
<Li id = "item1"> </li>
<Li id = "item2"> </li>
<Li id = "item3"> </li>
</Ul>

 

Ii. CSS abbreviations 

1. Value 

For example, to define the width of an element, you only need to enter w100 to generate

Css code

1. Width: 100px;

 

In addition to px, you can also generate other units, such as input h10p + m5e. The result is as follows:

Css code

1. Height: 10%;
2. Margin: 5em;

Organization Alias List:

• P indicates %
• E Indicates em
• X indicates ex
• Px or no unit can be used to indicate the addition of px // Kerita

2. Additional attributes 

You may have known some abbreviations before, such as @ f. You can generate:

Css code

1. @ Font-face {
2. Font-family :;
3. Src: url ();
4. }

Other attributes, such as background-image, border-radius, font, @ font-face, text-outline, and text-shadow, it can be generated using the "+" symbol. For example, input @ f + will generate:

Css code

1. @ Font-face {
2. Font-family: 'fontname ';
3. Src: url ('filename. eot ');
4. Src: url ('filename. eot? # Iefix') format ('embedded-opentype '),
5. Url ('filename. woff') format ('woff '),
6. Url ('filename. ttf') format ('truetype '),
7. Url ('filename. svg # fontname') format ('svg ');
8. Font-style: normal;
9. Font-weight: normal;
10. }

 

3. Fuzzy match 

If you are not sure about some abbreviations, Emmet will match the closest syntax according to your input content. For example, if you enter ov: h, ov-h, ovh, and oh, the generated code is the same:

Css code

1. Overflow: hidden;

 

4. Supplier prefix 

If you enter a CSS attribute that is not W3C standard, Emmet automatically adds the supplier prefix. For example, if you enter trs, the following code is generated:

Css code

1. -Webkit-transform :;
2. -Moz-transform :;
3. -Ms-transform :;
4. -O-transform :;
5. Transform :;

 

You can also add the "-" symbol before any attribute, or you can add a prefix for this attribute. For example, input-super-foo:

Css code

1. -Webkit-super-foo :;
2. -Moz-super-foo :;
3. -Ms-super-foo :;
4. -O-super-foo :;
5. Super-foo :;

If you do not want to add all prefixes, you can use abbreviations to specify them. For example,-wm-trf indicates that only the-webkit and-moz prefixes are added:

Css code

1. -Webkit-transform :;
2. -Moz-transform :;
3. Transform :;

The prefix is abbreviated as follows:

• W indicates-webkit-
• M indicates-moz-
• S indicates-ms-
• O indicates-o-

5. Gradient 

Enter lg (left, # fff 50%, #000) to generate the following code:

Css code

1. Background-image:-webkit-gradient (linear, 0 0,100% 0, color-stop (0.5, # fff), to (#000 ));
2. Background-image:-webkit-linear-gradient (left, # fff 50%, #000 );
3. Background-image:-moz-linear-gradient (left, # fff 50%, #000 );
4. Background-image:-o-linear-gradient (left, # fff 50%, #000 );
5. Background-image: linear-gradient (left, # fff 50%, #000 );

 

3. Additional Functions 

Generate Lorem ipsum text 

Lorem ipsum refers to a Latin article commonly used in typographical design. It is mainly used to test the effect of the article or text on different fonts and versions. With Emmet, you only need to input lorem or lipsum to generate these words. You can also specify the number of texts, such as lorem10, which will generate:

Reference Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

 

Iv. Customization 

You can also customize the Emmet plug-in:

• Add a new abbreviation or update an existing abbreviation. You can modify the snippets. json file.
• Modify the Emmet filter and action. You can modify the preferences. json file.
• Defines how to generate HTML or XML code. You can modify the syntaxProfiles. json file.

V. Plug-ins for different editors 

Emmet supports the following Editor (link: Emmet plug-in for this editor ):

• Sublime Text 2
• TextMate 1.x
• Eclipse/Aptana
• Coda 1.6 and 2.x
• Espresso
• Chocolat (add in the "Install Mixin" dialog box)
• Komodo Edit/IDE (via Tools → Add-ons menu)
• Notepad ++
• PS3
• <Textarea>
• CodeMirror2/3
• Brackets

Related Documentation: http://docs.emmet.io/(which contains a Demo that you can test the abbreviations mentioned in the article)

 

Link: http://www.iteye.com/news/27580