Skip to content

extensions.md

Latest commit

 

History

History
209 lines (162 loc) · 3.39 KB

extensions.md

File metadata and controls

209 lines (162 loc) · 3.39 KB

CSS extensions

List of extensions to current CSS properties.

clear

clear: fix

clear property is extended with fix option, which will output clearfix for the current selector:

&:after
	content: ''
	display: table
	clear: both

color

color: text [background]

Color is extended with optional 2nd argument that defines background color. Example:

color: white black
// expands to
color: white
background-color: black

font-size

font-size: size/line-height

Font size is extended with optional slash notation that defines line-height. Example:

font-size: 1em/2
// expands to
font-size: 1em
line-height: 2

margin

margin: ~clockhand~

Margin is extended with clockhand underscore omission syntax. Read more in clockhand documentation. Example:

margin: 5px _ _ 5px
// expands to
margin-top: 5px
margin-left: 5px

overflow

overflow: ellipsis [left]

Overflow is extended with ellipsis option, which outputs text ellipsis overflow styling. Example:

overflow: ellipsis
// expands to
white-space: nowrap
overflow: hidden
text-overflow: ellipsis

Optional [left] flag will make the ellipsis cut the text off from the left side.

overflow: ellipsis left
// expands to
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
direction: rtl
text-align: left

padding

padding: ~clockhand~

Padding is extended with clockhand underscore omission syntax. Read more in clockhand documentation. Example:

padding: 5px _ _ 5px
// expands to
padding-top: 5px
padding-left: 5px

position

position: cover|center

Position is extended with cover and center options. Example:

position: cover
// expands to
position: absolute
top: 0
left: 0
width: 100%
height: 100%
position: center
// expands to
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)

absolute|fixed|relative

absolute: ~clockhand~
fixed: ~clockhand~
relative: ~clockhand~

Shorthands to apply specific positions and position type in a single line, with clockhand underscore omission syntax. Example:

absolute: 50% _ _ 50%
// expands to
position: absolute
top: 50%
left: 50%

size|min-size|max-size

size: width [height] [!important]
min-size: width [height] [!important]
max-size: width [height] [!important]

Shorthand to apply both (min|max-)width and (min|max-)height in a single line. When height is omitted, it assumes width value. Example:

size: 100px
// expands to
width: 100px
height: 100px
min-size: 100px 60px !important
// expands to
min-width: 100px !important
min-height: 60px !important

visibility

visibility: visuallyhidden

Visibility is extended with visuallyhidden option, which outputs visuallyhidden boilerplate. Example:

visibility: visuallyhidden
// expands to
border: 0
clip: rect(0 0 0 0)
height: 1px
margin: -1px
overflow: hidden
padding: 0
position: absolute
width: 1px