Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A lightweight Sass tool set.
CSS Ruby Cucumber

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

Vanilla Sass Mixins

The purpose of these mixin is to provide a framework for writing vanilla scss


Sass 3.1+


Clone the Repo

git clone

Import the mixins at the beginning of your stylesheet

@import 'sass-mixins/mixins';



Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.

@include linear-gradient(#1e5799, #2989d8); @include linear-gradient(top, #1e5799 0%, #2989d8 100%); @include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

Border Radius

Border-radius will also take short-hand notation. `@include border-radius(10px); @include border-radius(5px 5px 2px 2px);


The three following properties support a comma separated list of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. animation-name | animation-duration | animation-timing-function

@include animation-name(slideup, fadein); @include animation-duration(1.0s, 1.2s); @include animation-timing-function(ease-in-out, ease-out);

Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.

@include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);


Shorthand mixin: Supports multiple parentheses-deliminated values for each variable. @include transition (all, 2.0s, ease-in-out); @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));

Currently the project is a work in progress. Feel free to help out.

Something went wrong with that request. Please try again.