Sass Mixin Library

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


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


.clearfix {
    @include clearfix;


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

BEM Sass Mixins

The following are a couple of Sass mixins for BEM (block, element, modifier) front-end naming methodology.

BEM Sass Mixins

The Sass mixin for BEM element is:

// BEM Element
@mixin element($element) {
    &__#{$element} {

The Sass mixin for BEM modifier is:

// BEM Modifier
@mixin modifier($modifier) {
    &--#{$modifier} {

BEM Sass Mixins Usage

Here is how you would use the BEM Sass mixins:

.block {
  /* Add .block CSS here */

    @include element('element-name') {
      /* Element CSS goes here */

    @include modifier('modifier-name') {
          /* Modifier CSS goes here */

        @include element('element-name') {
            /* Element of Modifier CSS goes here */


Where element-name and modifier-name is the name of the element and modifier.

As you can see, the block wraps around everything. The element and modifier of the block goes inside the block CSS class. If there is an element of the modifier, the element would go inside the modifier.