Example

Center

Centers an element

Element 
HTML: 
            <span class="mixins-example-arrow">_</span>
SCSS: 

        .mixins-example-arrow {
            @include button-mix(#000, #42c765, #ac42c7)
        }

Button-size

Sets the sizing of a button.

Button 
HTML: 
             <span class="mixin-example-button-size mixins-example-button-mix">Button</span>
SCSS: 

        .mixin-example-button-size {
            @include button-size(8px, 12px, 16px, 4px);
        }

        .mixins-example-arrow {
            @include button-mix(#000, #42c765, #ac42c7);
        }

Button-unstyled

Removes all button styling

Button 
HTML: 
             <span class="mixin-example-button-unstyled mixins-example-button-mix mixin-example-button-size">Button</span>
SCSS: 

        .mixin-example-button-unstyled {
            @include button-unstyled();
        }

        .mixins-example-arrow {
            @include button-mix(#000, #42c765, #ac42c7);
        }

        .mixin-example-button-size {
            @include button-size(8px, 12px, 16px, 4px);
        }

Classes

Mixin Parameters Values
button-mix Color, background, Hover color #(color), #(color), #(color)
button-size Vertical padding, Horizontal adding, Font size, Border radius (number)px, (number)px, (number)px, (number)px
button-unstyled No parameters