Five CSS filters in official documents of Emmet (Zen coding)

[Note] this series of blog posts are translated based on official Emmet documents. The original Article address is: Workshop.

Filter

A filter is a special submission processor that outputs abbreviations to be edited before being edited. To better understand how the filter works, we have created a simple tutorial.

In the following Editor, enter and expand:# Content> P. Title

As expected, the expanded result is the following htmlCode:

<DivID= "Content"><PClass= "Title"> </P></Div>
 

Now, let's look at the following:# Content> P. Title | E. A slightly different result will be obtained:

& Lt;Div id = "content"& Gt;& Lt;P class = "title"& Gt; & lt;/P& Gt;& Lt;/Div& Gt;
 

You only need to add a pipe operator to the tag name.E(Transcoding) filter. Before Emmet passes the output to the editor, this filter transcodes all non-XML secure symbols into Entity symbols. If expanded:# Content> P. Title | E, you will get:

& Amp;Lt; Div id = "content"& Amp;GT;& Amp;Lt; P class = "title"& Amp;GT;& Amp;Lt;/P& Amp;GT;& Amp;Lt;/Div& Amp;GT;
 

This is a piece of Dual-transcoding Code (for example, twice applied ).EFilter ). As shown in, we can apply multiple filters as per the number of times we want.

There are more interesting things to do. Try writing:# Content> P. Title | haml

 
# Content % P. Title
 

Pretty? You can expand the abbreviation according to the haml template!

As shown above, filters are a key concept of Emmet. For example, you can use the DOM model of the browser to expand the abbreviation. The first thing you need to do is to obtain the converted tree, and then gradually ignore each tree node and edit the output result. Filters can do anything: from adding spaces at the end of CSS rules to outputting output results with high syntax, and other complex tasks. Even define HTML outputHtmlFilter.

Implicit filter call

You can apply the filter to the abbreviation explicitly by appending the pipe operator to the abbreviation. The filter can also be called implicitly, depending on the type of the currently edited document. Do you want to add it after the abbreviation in haml every time?| Haml?

The default filter defines each syntax in the snippets. JSON FileFiltersSection 1:

 
{... "Html": {... "filters": "html "}}
 

If this section is not available, the default applicationHtmlFilter. If you want to apply multiple filters by default, you canFiltersSection 1 shows the list of filters separated by commas (,) or administrative operators:

 
{... "Html": {... "filters": "HTML, e "}}
 

Now, in the HTML document, expand the abbreviation each time,HtmlAndEAll filters will be applied.

Be careful!Snippets. JSONFile, you mustHtmlOrThe haml syntax filter is placed first in the default filter. Otherwise, blank output is obtained because the syntax filter is defined as the primary output result.

Available filter haml Syntax: Haml

Haml syntax filter: abbreviated output by haml template. It is the default filter for haml files.

HTML Syntax: Html

HTML syntax filter: Short for HTML/xml tag output. Default filters in all places except the haml file.

Transcoding: E

Transcode non-XML secure characters, such:<,>And&.

For example:Div # header | EExpand& Lt; Div id = "Header" & gt; & lt;/Div & gt;. This filter is extremely useful to tech blogs/Tech writers because they want to display code snippets on the web site (of course, they need to add Emmet support to CMS ).

Annotation label: C

Add surround comments for important labels. By default, "important tags" refer to thoseIDAnd/orClass attribute label.

Div> Div # page> P. Title + p | C
 

Expand:

 <  Div  >      <  Div  ID  = "Page"  >          <  P  Class  = "Title"  > </  P  >          <! -- /. Title  -->          <  P  > </  P  >      </  Div  >      <! --  /# Page  -->  </  Div  > 

This filter has several options that can be redefined:

• Filter. commenttrigger: attribute that triggers the comment output. The default value isID and class.
• Filter. commentafter:: ERB-template-style annotations that will be placed next to "important tags. The default value is\ N <! --/<% = ATTR ("ID", "#") %> <% = ATTR ("class", ".") %> -->
• Filter. commentbefore: To be placed before "important tag"ERB-template-style annotation. The default value is null.

XSL adjustment: XSL

This filter is available in<XSL: Variable>And<XSL: With-param>Delete tags when they contain child nodesSelectAttribute. For example:

 
AP> WP
 

Expand:

<XSL: Apply-templatesSelect= ""Mode= ""><XSL: With-ParamName= ""Select= ""/></XSL: Apply-templates>
 

While

 
AP> WP> call
 

Output

 < XSL: Apply-templates  Select  = ""  Mode  = ""  >      <  XSL: With-Param  Name  = ""  >          <  XSL: Call-template  Name  = ""  />      </ XSL: With-Param  >  </  XSL: Apply-templates  > 

It is applied to XSL files by default.

Single row: S

Expand the abbreviation into a single-choice code. In JavaScript, Python, Ruby, etc.Programming LanguageTemplate string. For example:

 
Ul> li * 4 | S
 

Expand:

    ul  >  LI  >  LI  >  LI  >  LI  >  LI  >  LI  >  LI  >  LI  >  ul  > 

Delete row mark:T

It is useful only in the abbreviation of "enclose": Delete the row mark from the enclosed row. For more information, see "wrap with abbreviation.

Yandex BEM/oocss

If you write HTML and CSS code in a specific oocss-style or yandex's BEM style, you will certainly like this filter. It provides some aliases and automatically inserts the comment block and comment name into the class.

In short, bem introduces three types of CSS class: blocks, elements, and modifiers. A block is the namespace of the language part of an HTML page, for exampleSearch-Form. An element is a part of the file, for exampleSerch-form _ query-string. The modifier defines block variables and element variables:Search-form_wideOrSearch-form_narrow. Use the element in the class name__(Two underscores) are separated and modifiers are used_(Separated by an underscore ).

Bem/oocss is a good way to maintain and reuse CSS. Even with the help of Emmet, writing these class names in common HTML may still be boring. The same block and element name must be repeatedly written in each abbreviated element:

Form. search-form.search-form_wide> input. Search-form _ query-string + input: S. Search-form _ BTN. Search-form _ btn_large
 

BEMThe filter allows the manufacture of an abbreviated sorter:

 
Form. Search-form. _ wide> input.-query-string + input: S.-btn_large | BEM
 

How does it work?

Bem Filters Introduce several conceptual types of class name prefixes:__Or-As the element prefix, and_It is the modifier prefix. When you encounter a class name with these prefixes, the filter will handle the following:

• If the class name has an element prefix, the filter will parse the block name from the parent node;
• If the class name has a modifier prefix, the filter will parse the block name and element name from the current node or parent node;
• If both the block and modifier prefixes exist, the filter resolves the block names from the parent node and outputs all "unmodifyed" and "modifyed" classes on the element;
• If multiple elements are modified, the filter willNthResolve the block name in the parent node.

The following are examples:

Abbreviation	Output
. B _m	<Div class = "B B _m"> </div>
. B _m1. _ m2	<Div class = "B B _m1 B _m2"> </div>
. B>. _ m	<Div class = "B"> <Div class = "B B _m"> </div>
. B1>. b2_m1>.-E1 +. -- e2_m2	<Div class = "B1"> <Div class = "B2 b2_m1"> <Div class = "B2 _ e1"> </div> <Div class = "B1 __ e2 B1 _ e2_m2 "> </div>

Remember to makeBEMThe filter is always the first in the HTML syntax filter.