Numeric Production Mechanism

    mixins.scss

    3.0.0 • Public • Published

    mixins.scss mixins.sass

    scss mixins syntax of sass

    Installation

    via npm

    npm i mixins.scss --save

    via bower

    bower install mixins.scss --save

    Usage

    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);
    }

    Install

    npm i mixins.scss

    DownloadsWeekly Downloads

    5

    Version

    3.0.0

    License

    MIT

    Last publish

    Collaborators

    • rich-97