Emmet is known to be the most loved and indispensable feature of vscode, Today you'll know how you can use it to speed up your css workflow.
Let's get started
Unit Values
You can specify values for every property that has a unit, For:
100 --> 100px
100p --> 100%
100r --> 100rem
100e --> 100em
Example:
m100 --> margin: 100px
m100p --> margin: 100%
m100r --> margin: 100rem
m100e --> margin: 100em
Margin and Padding
m --> margin: ;
mt --> margin-top: ;
mb --> margin-bottom: ;
Same way applies to padding
pr --> padding-right: ;
pl --> padding-left: ;
Width and Height
w --> width: ;
maw --> max-width: ;
miw --> min-width: ;
h --> height: ;
mah —> max-height: ;
mih --> min-height: ;
Color
type c# followed by the color value, You can write one, two, three or six characters as color value:
c#1 --> color: #111111
c#e0 --> color: #e0e0e0
c#fc0 --> color: #ffcc00
Font
fz --> font-size: ;
fw --> font-weight: ;
ff --> font-family: ;
fs --> font-style: ;
Position
type pos: followed by the first letter of the position's values
pos:r --> position: relative
pos:a --> position: absolute
pos:f --> position: fixed
pos:s --> position: static
t10 --> top: 10px
b10p --> bottom: 10%
r --> right: ;
l --> left: ;
Display
type d: followed by the first letter of the display's values
d:b --> display: block
d:i --> display: inline
d:ib --> display: inline-block
d:f --> display: flex
d:if --> display: inline-flex
d:g --> display: grid
d:ig --> display: inline-grid
d:n --> display: none
Border
bd --> border: ;
bd:n --> border:none;
bd+ --> border:1px solid #000;
the !important modifier
just add ! after the property's first letter
p! --> padding: !important;
Grouping properties
You can write multiple properties in one line by using the plus + sign
For example: m10+p20r+bd++c#1 will produce:
/* m10 */
margin: 10px;
/* p20r */
padding: 20rem;
/* bd+ */
border: 1px solid #000;
/* c#1 */
color: #111;
Conclusion
See how Emmet is a powerful tool! Don't forget to leave a ❤️ if this post was helpful to you!
Happy Emmeting!
Top comments (0)