A collection of frequently used {Less} CSS mixins
Install effortless-css from NPM
npm install effortless-css --save-dev
Currently, there's only one way to use effortless-css: reference the provided Less file into a stylesheet.
It could be as simple as
@import '../../node_modules/effortless-css/less/all.less';
Creates a vertical gradient from top to bottom.
Accepts: @top (defaulting to #fff) and @bottom (defaulting to #000) for gradient colors and optionally @fallback for browsers that do not support gradients. When not provided with @fallback, @top is used
Creates a horizontal gradient from left to right.
Accepts: @left (defaulting to #fff) and @right (defaulting to #000) for gradient colors and optionally @fallback for browsers that do not support gradients. When not provided with @fallback, @left is used
Makes an element transparent (as opposed to the name).
Accepts: @alpha (defaulting to 1)
Sets the box-sizing of an element.
Accepts: @sizing (defaulting to border-box)
Makes the corners of an element rounded.
Accepts: @radius (defaulting to 50%)
Sets a transform to an element.
Accepts: @transform (defaulting to rotate(0deg))
Sets the transform origin of an element.
Accepts: @origin (defaulting to 50% 50%)
Sets the transform style of an element.
Accepts: @style (defaulting to preserve-3d)
Sets the transform perspective.
Accepts: @perspective (defaulting to 500)
Makes an element host multiple columns.
Accepts: @count (defaulting to 2)
Sets transition to properties of an element.
Accepts: Duration, property or any number of properties
Note: If passing multiple arguments, end the last one with a ; so that the generated CSS is as expected. Otherwise, all the arguments in the output will be separated by a space instead of a comma.
Sets animation to an element.
Accepts: @props
Sets a filter to an element.
Accepts: @prop (defaulting to none)
- Include more mixins if possible