sassiness

1.4.2 • Public • Published

sassiness

A small package that holds beautiful modular SASS Mixins

put logo here

Build Status


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) 

Readme

Keywords

Package Sidebar

Install

npm i sassiness

Weekly Downloads

2

Version

1.4.2

License

MIT

Unpacked Size

7.93 kB

Total Files

7

Last publish

Collaborators

  • lukethecoder