SASS Mixins

A collection of SASS mixins for your project.

Available via Bower

You can download the mixins through Bower:

bower install lib-sass-mixins

Mixins examples

• Animation
  • Keyframes
• Background size
• Box shadow
• Opacity
• Clearfix
• Border radius
  • Border top radius
  • Border bottom radius
  • Border left radius
  • Border right radius
• Box-sizing
• Transition
• Columns
• Font-family
• Absolute center
• Transform
  • Default
  • Translate
  • Skew
  • Scale
  • Rotate
  • Transform-origin
• Gradients
  • Linear Horizontal (simple)
  • Linear Horizontal (multiple)
  • Linear Vertical (simple)
  • Linear Vertical (multiple)

Animation

.class { @include animation(animationName 1s); }

Keyframes

@include keyframes(animationOne) {
    from { background-color: red; }
    to { background-color: black; }
}

Background size

.class { @include background-size(auto 100%); }

Box shadow

.class { @include box-shadow(1px 1px 10px 10px #666, 2px 2px 5px 5px #ddd inset); }

Opacity

.class { @include opacity(0.5); }

Clearfix

.class { @include clearfix(); }

Border-radius

.class { @include border-radius(10px); }

Border-top-Radius

.class { @include border-top-radius(10px); }

Border-bottom-Radius

.class { @include border-bottom-radius(10px); }

Border-left-Radius

.class { @include border-left-radius(10px); }

Border-right-Radius

.class { @include border-right-radius(10px); }

Box-sizing

.class { @include box-sizing(); }

Transition

.class { @include transition(color 1s .5s ease-out); }

Columns

.class { @include columns(3, 150px, solid 1px red); }

Transform

Default

.class { @include transform(rotate(45deg); }

Translate

.class { @include translate(100px, 100px); }

Skew

.class { @include skew(10px, 10px); }

Scale

.class { @include scale(0.75); }

Rotate

.class { @include rotate(45deg); }

Transform-origin

.class { @include transform-origin(left, top); }

Gradients

Linear horizontal (simple)

Only start and end color.

.class { @include horizontal-gradient(#666, #000); }

Linear horizontal (multiple)

The first color is the background color and the other are steps of gradient.

.class { @include horizontal-gradient(#666, #000 50%, #444 80%); }

Linear vertical (simple)

Only start and end color.

.class { @include vertical-gradient(#666, #000); }

Linear vertical (multiple)

The first color is the background color and the other are steps of gradient.

.class { @include vertical-gradient(#666, #000 40%, #333 75%); }

Absolute Center

Reference

.class {
    @include absolute-center(5%, 0, none, 0);
}

.class {
  position: absolute;
  top: 5%;
  right: 0;
  left: 0;
  margin: auto;
}

Font-family

.class { @include font-face("helvetica","../font/helvetica"); }