mixins.scss
scss mixins syntax of sass
Installation
via npm
npm i mixins.scss --save
via bower
bower install mixins.scss --save
Usage
font-face
trans
trans-bezier
border
bgc
media
clearfix
text-overflow
overflow-x
unstyled-list
inline-list
unstyled-link
hidden
heading
center-block
font-face
/** @param $fontname name of font* @param $path the path of font* @apram $weight this is optional param default: normal*/ // font-weight: normal // or include font-weight
trans
/** @param $args is optional default: all .5s ease, or use the following list for use the prefix (all .5s):* 1. linear* 2. ease-in* 3. ease-in-out* 4. ease-out*/ .foo // Use the name of animation .foo // also .. .foo
trans-bezier
/** @params $n, $m, $l, $p betwen 0 and 1*/ .foo
border
/** @param $width border width the param not have unity* @param $color is optional default: #0b0b0b* @param $style is optional default: solid*/ .foo // or include style .foo
bgc
background-color
/** @param $color this param has 3 option:* 1. hex color e.p #009288* 2. rgba color e.p (1, 22, 31, .8)* 3. rgb color e.p (22, 14, 21)*/ // hex color // rgb color ; // rgba coor ;
media
/** @param $media options:* - xs : 360px* - sm : 767px* - md : 1023px* - lg : 1360px */ .foo // or
clearfix
text-overflow
overflow-x
unstyled-list
inline-list
unstyled-link
/** @param $color is optional default: #000*/ a // or adding color a
hidden
/** @param $what options:* - invisible or hide.*/ .foo
heading
// Styles for heading h1, h2... h6.
center-block
/** @param $width the width of element only on percentage (unity relative) @param $margin is optional default: 0 auto or (margin-top and margin-bottom) unity: pixels*/ foo