Sass Mixin Library

Sass Mixin Library is a simple, lightweight, yet powerful mixin library for Sass.

Features

Here are the main features of the Sass Mixin Library:

  • Simple to add to your project and use in your project;
  • Adjust variables to your liking; and
  • Save tons of time and typing.

Supported Mixins

Sass Mixin Library currently supports the following Sass mixins:

  • Background gradients (top to bottom, left to right, gradient)
  • Background opacity
  • BEM front-end naming methodology
  • Border
  • Border image
  • Border radius
  • Breakpoints for responsive design
  • Clearfix
  • Font face
  • Font size (rem)
  • Height and width size
  • Margin
  • Padding
  • Text shadow
  • Vendor prefixes helpers

How-to Use

Copy the _mixins.scss file and mixins directory to your project. Add the following to your core file or file in which you want mixins to be added:

@import "mixins";

Example of implementation can be found in test.scss.

Example Output

Input:

.clearfix {
    @include clearfix;
}

Output:

.clearfix {
    *zoom: 1; 
}
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}