Ruby Gherkin CSS JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

#Vanilla Sass Mixins The purpose of Vanilla Sass Mixins is to provide a comprehensive framework of sass mixins that are designed to be as vanilla as possible. Meaning they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.

##Requirements Sass 3.1+

##Install Clone the Repo

git clone

Import the mixins at the beginning of your stylesheet

@import 'sass-mixins/mixins';

##Usage Below are a few examples of mixin usage. Note that these are just a few, explore the repo to find out more.


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));`

Add-on: Buttons

The button add-on provides well-designed buttons with a single line in your CSS.

The mixin can be called with no parameters to render a blue button with the "simple" style.

input[type="button"] {
  @include button();

The mixin supports a style parameter. Right now the available styles are "simple" (default) and "shiny".

input[type="button"] {
  @include button(shiny);

The real power of the mixin is revealed when you pass in the optional color argument. Using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background.

input[type="button"] {
  @include button(shiny, #ff000);

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