Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A simple set of SASS mixing for projects

tree: 490687ccab

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 README.md
Octocat-spinner-32 _mixins.scss
README.md

CSS3

Border Radius

/* Mixin */
@include border-radius($radius, $topleft, $topright, $bottomright, $bottomleft);

/* Example */
@include border-radius(3px);
@include border-radius($topleft: 3px);

/* Output */
-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        border-radius: 3px;

Supports

  • Webkit
  • Mozilla
  • Opera
  • Internet Explorer 9+

Box Shadow

/* Mixin */
@include box-shadow($x, $y, $blur, $color, $inset: false);

/* Example */
@include box-shadow(0, 0, 10px, rgba(0, 0, 0, .5));

/* Output */
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0 .5);
   -moz-box-shadow: 0 0 10px rgba(0, 0, 0 .5);
        box-shadow: 0 0 10px rgba(0, 0, 0 .5);

Supports

  • Webkit
  • Mozilla
  • Opera
  • Internet Explorer 9+

Box Sizing

/* Mixin */
@include box-sizing($value);

/* Example */
@include box-sizing(border-box);

/* Output */
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

Supports

  • Webkit
  • Mozilla
  • Opera
  • Internet Explorer 8+

Transitions

/* Mixin */
@include transition($property: false, $time: 1s, $ease: linear);

/* Example */
@include transition(width, .35s);

/* Output */
-webkit-transition: width .35s linear;
   -moz-transition: width .35s linear;
     -o-transition: width .35s linear;
        transition: width .35s linear;

Supports

  • Webkit
  • Mozilla
  • Opera

Linear Gradient

/* Mixin */
@include linear-gradient($first, $last);

/* Example */
@include linear-gradient(#000, #111);

Supports

  • Webkit
  • Mozilla
  • Opera
  • Internet Explorer 10+
  • Internet Explorer 6-9

Other

Retina Graphics

/* Mixin */
@include hires-graphic($file, $type, $width, $height);

/* Example */
@include hires-graphic('logo', 'png', 200px, 120px);
Something went wrong with that request. Please try again.