Emmet-like JSS snippets

Usage

Available snippets

Flexbox

• d:f display: flex
• ai:c align-items: center
• ai:fs align-items: flex-start
• ai:fe align-items: flex-end
• jc:c justify-content: center
• jc:fs justify-content: flex-start
• jc:fe justify-content: flex-end
• jc:sa justify-content: space-around
• jc:sb justify-content: space-between
• fx flex
• fxg flex-grow
• fxsh flex-shrink
• fxw flex-wrap
• fxd flex-direction
• fxd:c flex-direction: column
• as:c align-self: center
• as:fs align-self: flex-start
• as:fe align-self: flex-end

Fonts

• fs font-size
• ff font-family
• fw font-weight

Color

• c color
• c:ra color rgba
• op opacity

Padding

• p padding
• pr padding-right
• pl padding-left
• pt padding-top
• pb padding-bottom

Margin

• m margin
• mr margin-right
• ml margin-left
• mt margin-top
• mb margin-bottom

Display

• d:ib display: inline-block
• d:i display: inline
• d:n display: none
• d:b display: block

Visibility

• v:h visibility: hidden

Overflow

• ov:h overflow: hidden
• ov:v overflow: visible
• ov:s overflow: scroll
• ov:a overflow: auto
• ovx:h overflow-x: hidden
• ovx:v overflow-x: visible
• ovx:s overflow-x: scroll
• ovx:a overflow-x: auto
• ovy:h verflow-y: hidden
• ovy:v overflow-y: visible
• ovy:s overflow-y: scroll
• ovy:a overflow-y: auto

Cursor

• cur:p cursor: pointer

Position

• pos:r position: relative
• pos:a position: absolute
• pos:s position: static
• pos:f position: fixed

Width && Height

• w width
• maw max-width
• miw min-width
• h height
• mah max-height
• mih min-height

For more information

• Reference: Emmet cheat sheet