Emmet
- Syntax
  - struct
  - attr
  - number
- HTML
- CSS
  - Font
  - Border

Emmet笔记

字数 275 · 2019-05-05

Emmet

Syntax

+ > ^
*
. #
()
[]
{}
$

空格将中断 Emmet

struct

> - child
+ - sibling
^ - climb-up
() - grouping
* - mutiplie

attr

# - id
. - class
[] - attribute
{} - text

number

$ - 1,2,3,…
$$ - 01,02,03,…
$@3 - 3,4,5,…
$@- - 5,4,3,…

HTML

link:css

<link rel="stylesheet" href="style.css">

CSS

{
  margin: 10px; // m10
  margin-left: 10px; // ml10
  margin: -10px -20px; // m-10--20
}

{
  color: #000; // c
  width: 100%; // w100p
  margin: 10px !important; // m10!
}

{
  display: flex; // d:f
  align-items: center; // aic
  justify-content: space-between;; // jcsb
  flex: 1; // fx1
  flex-direction: column; // fxdc
}

{
  position:relative; // pos

  top: 10px; // t10
  bottom: 10px; // b10
  left: 10px; // l10
  right: 10px; // r10
}

{
  transition: all 0.2s; // trs
  transform: scale(1, 2); // trf:s
}

Font

{
  font-size: 12px; // fz12
}

Border

{
  border: 1px solid #000; // bd
  border-radius: 8px; // bdrs8
  border-top-left-radius: 4px; // bdtlrs4
}

https://docs.emmet.io/abbreviations/syntax/
https://docs.emmet.io/cheat-sheet/