Category: Open Source Code

Stylus Mixin Library

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

Download Now

How-to-Use

Copy the mixins folder to your project directory and then add the following line of code to your project’s main file:

@import 'mixins/*'

Examples

Each mixin file located in the mixins directory contains documentation on how to include the mixin.

Example of implementation can also be found in test.styl.

Sass Mixin Library

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

Download Now

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