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 
@include font-face('yourfontname', '/path/font');
 
// or include font-weight 
@include font-face('yourfontname', '/path/font', 600);

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 {
  @include trans;
}
 
// Use the name of animation 
.foo {
  @include trans(linear);
}
 
// also .. 
.foo {
  @include trans(border-radius .2s ease-in-out);
}

trans-bezier

/*
* @params $n, $m, $l, $p betwen 0 and 1
*/
 
.foo {
  @include trans-bezier(0.25, 0.25, 0.5, 0.1);
}

border

/*
* @param $width border width the param not have unity
* @param $color is optional default: #0b0b0b
* @param $style is optional default: solid
*/
 
  .foo {
    @include border(1, $color);
  }
 
  // or include style 
  .foo {
    @include border(5, $color, dotted);
  }

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 
@include bgc(#009688);
 
// rgb color 
@include bgc((22, 35, 88));
 
// rgba coor 
@include bgc((34, 123, 1, .8));

media

/*
* @param $media options:
* - xs : 360px
* - sm : 767px
* - md : 1023px
* - lg : 1360px
 */
 
.foo {
  @include media(xs) {
    width: 50%;
  }
}
 
// or 
 
@include media(xs) {
  .foo {
    width: 50%;
  }
}

clearfix

@include clearfix;

text-overflow

@include text-overflow;

overflow-x

@include overflow-x;

unstyled-list

@include unstyled-list;

inline-list

@include inline-list;

unstyled-link

/*
* @param $color is optional default: #000
*/
 
a {
  @include unstyled-link;
}
 
// or adding color 
a {
  @include unstyled-link(#0b0b0b);
}

hidden

/*
* @param $what options:
* - invisible or hide.
*/
 
.foo {
  @include hidden('invisible');
}

heading

// Styles for heading h1, h2... h6. 
 
@include heading {
    font-family: 'Ubuntu';
    color: #ccc;
}

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 {
  // equivalent to width: 70%; and margin: 20px auto; 
  @include center-block(70, 20);
}