This is a draft cheat sheet. It is a work in progress and is not finished yet.
!globals
Em Base
$em-base: 14px;
Prefixer
$prefix-for-webkit: true;
$prefix-for-mozilla: true;
$prefix-for-microsoft: true;
$prefix-for-opera: true;
$prefix-for-spec: true;
|
Mixins - General
@ appearance(*args) |
@ backface-visibility(*args) |
@ border-image(*args) |
@ box-sizing(*args) |
@ calc(*args) |
@ filter(*args) |
@ font-face |
@ font-feature-settings |
@ inline-block |
@ hidpi |
@ hyphens(*args) |
@ image-rendering |
@ keyframes |
@ placeholder |
@ perspective |
@ linear-gradient(*args) |
@ radial-gradient(*args) |
@ selection |
@ user-select |
Mixins - background
@ background(*args) |
@ background-image(*args) |
Mixins - border-radius
@ border-top-radius(*args) |
@ border-bottom-radius(*args) |
@ border-left-radius(*args) |
@ border-right-radius(*args) |
Mixins - animation
{list}
- same as the CSS3 animation shorthand |
|
@ animation-delay(*args) |
|
@ animation-direction(*args) |
|
@ animation-duration(*args) |
|
@ animation-fill-mode(*args) |
|
@ animation-iteration-count(*args) |
|
@ animation-name(*args) |
|
@ animation-play-state(*args) |
|
@ animation-timing-function(*args) |
Mixins - transition
@ transition(*args) |
@ transition-delay(*args) |
@ transition-duration(*args) |
@ transition-property(*args) |
@ transition-timing-function(*args) |
|
|
Mixins - Transform
@ transform(*args) |
@ transform-origin(*args) |
Functions
linear-gradient(*args) |
modular-scale(*args) |
em(*args) |
rem(*args) |
radial-gradient(*args) |
shade(*args) |
strip-units(*args) |
tint(*args) |
unpack(*args) |
Add-ons
@ border-color(*args) |
@ border-style(*args) |
@ border-width(*args) |
@ clearfix |
@ hide-text |
@ directional-property(*args) |
@ ellipsis(*args) |
@ margin(*args) |
@ padding(*args) |
@ position(*args) |
@ prefixer(*args) |
@ retina-image(*args) |
@ size(*args) |
@ triangle |
@ word-wrap(*args) |
Shortcuts : HTML5 Inputs
#{$all-text-inputs} |
#{$all-text-inputs-hover} |
#{$all-text-inputs-focus} |
#{$all-buttons} |
#{$all-buttons-hover} |
#{$all-buttons-focus} |
#{$all-buttons-active} |
Shortcuts : font-stack
$georgia |
$helvetica |
$lucida-grande |
$monospace |
$verdana |
Shortcuts : timing-functions
$ease-in-* |
$ease-out-* |
$ease-in-out-* |
* = quad, cubic, quart, quint, sine, expo, circ, back
|
