sassiness
A small package that holds beautiful modular SASS Mixins
put logo here
Install
Using npm
$ npm i sassiness
At the top of your App.sass
(or App.scss
)
@import "~sassiness/sassiness.sass"
Example Usage
Below is an example of how to use the mixins. Each other mixin works the same way; by placing the variables inside the ($).
center-box
/* this is imported */ width: $width margin: $margin_vertical (100 - $width) / 2
/* in your App.sass file ('$' are your variables) */.div
/* compiled css code */
Current Mixins Available
Below is a list of possible @include mixins. If you wish to see what they are all doing behind the scenes, look in the node_modules/sassiness/sassiness.sass file.
center-box
background-image
background-image
// $orientation can be either 'vertical', 'horzontal', 'deg value' or left blank for radial
hover-transition
border-radius
box-shadow
list-reset
// sets padding + margins to 0 and list-style: none
clearfix
// Clearfix hack for parent with floating children
placeholder
// $fontsize is optional
button-default
// $border-color is optional (defaults to $color), $horizontal padding is optional (defaults to $vertical-padding)