Introduction
Emmet is a common built-in software for text editors that dramatically speeds up coding in HTML (or XML, XSLT, and other structured formats) by using CSS-like abbreviations and shortcuts that expand into full code blocks. It essentially allows developers to write less code while still achieving the same output.
– Wikipedia Emmet
Expand Abbreciation
You may use emmet to write very short abbreviated snippet that will expand to a proper HTML element(s), listed below are some of the very common use cases:
(* You can find more about this in: Emmet Official Documentation: Expand Abbreviation)
Emmet Syntax | Description |
---|---|
! | Generates a complete HTML5 document |
div | Creates a <div> element |
ul>li*5 | Creates a <ul> with 5 <li> items |
a[href] | Creates an <a> element with an href attribute |
img[src] | Creates an <img> element with a src attribute |
h1 | Creates an <h1> element |
p*3 | Creates 3 <p> elements |
header>nav>ul>li*3 | Creates a nested structure of elements |
section>h2+p | Creates a <section> with an <h2> and a <p> |
class | Adds a class to an element (e.g., div.class-name ) |
id | Adds an ID to an element (e.g., div#id-name ) |
> | Parent-child relationship |
+ | Sibling relationship |
* | Multiplication (number of elements), In “wrap with abbreviation” mode, it will wrap every single line selected with what comes before the * sign |
Wrap with Abbreviation
In code editor with emmet built in like Visual Studio Code (see: Emmet in Visual Studio Code), you can use emmet syntax to wrap cursor selection with provided abbreviation/snippets.
(*You can find more about this in: Emmet Official Documentation: Wrap with Abbreviation)
Option-1: Wrap whole selection
|
|
Option-2: Wrap multiple lines with pattern
|
|
CSS Abbreviations
Not only can you use emmet abbreviation in HTML, you may also use it in CSS. For CSS syntax, Emmet has a lot of predefined snippets for properties. For example, you can expand m5p
abbreviation to get margin:5%
.
( * You read this post: Emmet Official Documentation: CSS Abbreviations)
Snippet with Value
By default, when you expand an abbreviation with integer value, Emmet outputs it with a
px
unit:m10
→margin: 10px;
. If you’re expanding an abbreviation with a float value, it is outputted with anem
unit:m1.5
→margin: 1.5em;
. But you can explicitly provide the unit name, just by putting any alpha characters right after value:m1.5ex
→margin: 1.5ex;
,m10foo
→margin: 10foo;
.If you’re explicitly defining units, you don’t need to use hyphens to separate values anymore:
m10ex20em
→margin: 10ex 20em;
,m10ex-5
→margin: 10ex -5px;
Value Aliases
Emmet has a few aliases for commonly used values:
p
→%
(e.g.w100p
→width: 100%
)e
→em
(e.g.m10p30e5x
→margin: 10% 30em 5ex
)x
→ex
(e.g.m10p30e5x
→margin: 10% 30em 5ex
)
Some CSS properties are defined as unit-less, e.g. no unit suffix will be outputted:
lh2
→line-height: 2;
,fw400
→font-weight: 400;
. These values are:'z-index
,line-height
,opacity
andfont-weight
but you can override them withcss.unitlessProperties
preferences.
!important modifier
You can add
!
suffix at the end of any CSS abbreviation to get!important
value:
p10px!+m10e!
→padding:10px !important; margin:10em !important;
Reference
- Emmet Documentation: https://docs.emmet.io
- Rapid Webpage Creation With Emmet (HTML and CSS): https://medium.com/@ipenywis/rapid-webpage-creation-with-emmet-html-and-css-82da2fcca700
- https://code.visualstudio.com/docs/languages/emmet