1.4.2 • Published 6 years ago
sassiness v1.4.2
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 */
@mixin center-box($width, $margin_vertical)
width: $width
margin: $margin_vertical (100 - $width) / 2
/* in your App.sass file ('$' are your variables) */
.div
@include center-box($width, $margin_vertical)
/* compiled css code */
.div
width: 80%;
margin: 25px 10%;
#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
@include center-box($width, $margin_vertical)
###background-image
@include background-image($url, $size, $position, $repeat, $color)
background-image
// $orientation can be either 'vertical', 'horzontal', 'deg value' or left blank for radial
@include bg-gradient($start-color, $end-color, $orientation)
###hover-transition
@include hover-transition($sec)
###border-radius
@include border-radius($size)
###box-shadow
@include box-shadow($color, $radius, $spread)
###list-reset
// sets padding + margins to 0 and list-style: none
@include list-reset;
clearfix
// Clearfix hack for parent with floating children
@include clearfix
placeholder
// $fontsize is optional
@include placeholder($color, $fontsize)
button-default
// $border-color is optional (defaults to $color), $horizontal padding is optional (defaults to $vertical-padding)
@include button-default($color, $bg-color, $radius, $thickness, $border-color, $vertical-padding, $horizontal-padding)