simple-scss-mixins

Simple-scss-mixins is a small set of SCSS mixins that aims to make you type less.

Installation

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';

Usage

The file name matches the mixin name, execute any one of them by running

@include NAME(...)

Mixins

_abs-center.scss

requires $width and (optional) $height
Absolutely centers an object based on it's (static) dimensions

_abs-position.scss

uses: $left, $right, $top and/or $bottom
Absolutely positions an object to it's relative parent

_add-after.scss

sets $content and (optional) $offset
Sets any valid content character for pseudo ::after,
providing an $offset moves the character away from the parent

_add-before.scss

sets $content and (optional) $offset
Sets any valid content character for pseudo ::after,
providing an $offset moves the character away from the parent

_borders.scss

requires $width and (optional) $direction, $color and/or $style
Sets border(s) and properties. Providing a $direction creates a singular border.

_font.scss

sets (optional) $align $family, $size, $weight, $style, $color, $deco, $transform
Depending on $size positions element in center op viewport.

_fontface.scss

requires $family and (optional) path

Creates a fontface include from a path and a set of font files

spacing.scss

$in and/or $out

Sets the inner padding $in and outer margin $out of an object.

truncate.scss

$requires lines

Simple trunactation based on the amount of lines required.