xico2k-scss-mixins
v0.0.9
Published
My Personal SCSS Mixins
Downloads
6
Readme
xico2k-scss-mixins
This is my personal mixins.
Installation
With npm:
$ npm i xico2k-scss-mixins
or with yarn:
$ yarn add xico2k-scss-mixins
Usage
On your SCSS file just add:
@import "~xico2k-scss-mixins/mixins";
Methods and Examples
/* Simple perfixes like compass */
@include transition(left .2s ease-in-out);
@include transform(rotate(180deg));
@include appearance(none);
@include filter(brightness(0.4));
@include translateX(10px);
@include translateY(20px);
@include translate(10px 20px);
@include box-shadow(3px 3px 5px 6px #ccc);
/* Standard clearfix */
@include clearfix();
/* Flexbox usage with the prefixes */
@include flex();
@include flex-direction();
@include flex-wrap();
@include flex-flow();
@include order();
@include flex-grow();
@include flex-shrink();
@include flex-basis();
@include justify-content();
@include align-content();
@include align-items();
@include align-self();
@include flexbox(); /* Use on the wrapper */
@include flexbox-float(); /* Use on the elems inside of the wrapper */
/* CSS Arows */
@include arrow(top, 10px, 5px, #000); /* Orientation (top; right; bottom; left), Width, Height, Color */
@include arrow-hover(top, #FF0) /* To use on the :hover method */