Simple-scss-mixins is a small set of SCSS mixins that aims to make you type less.
Install the package via Node package manager
npm install simple-scss-mixins --save-dev
Import the mixins in your stylesheet before other logic:
@import '.../node_modules/simple-scss-mixins/mixins/all';
Or include individual mixins:
@import '.../node_modules/simple-scss-mixins/mixins/fontface';
@import '.../node_modules/simple-scss-mixins/mixins/border';
The file name matches the mixin name, execute any one of them by running
@include NAME(...)
requires $width and (optional) $height
Absolutely centers an object based on it's (static) dimensions
uses: $left, $right, $top and/or $bottom
Absolutely positions an object to it's relative parent
sets $content and (optional) $offset
Sets any valid content character for pseudo ::after,
providing an $offset moves the character away from the parent
sets $content and (optional) $offset
Sets any valid content character for pseudo ::after,
providing an $offset moves the character away from the parent
requires $width and (optional) $direction, $color and/or $style
Sets border(s) and properties.
Providing a $direction creates a singular border.
sets (optional) $align $family, $size, $weight, $style, $color, $deco, $transform
Depending on $size positions element in center op viewport.
requires $family and (optional) path
Creates a fontface include from a path and a set of font files
$in and/or $out
Sets the inner padding $in and outer margin $out of an object.
$requires lines
Simple trunactation based on the amount of lines required.