Common mixins

mixins.scss

@mixin gradient($from, $to) {
  background: $from; // Old browsers
  background: -moz-linear-gradient(top,  $from 0%, $to 100%); // FF3.6+
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to)); // Chrome,Safari4+
  background: -webkit-linear-gradient(top,  $from 0%,$to 100%); // Chrome10+,Safari5.1+
  background: -o-linear-gradient(top,  $from 0%,$to 100%); // Opera 11.10+
  background: -ms-linear-gradient(top,  $from 0%,$to 100%); // IE10+
  background: linear-gradient(to bottom,  $from 0%,$to 100%); // W3C
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='#ffffff',GradientType=0 ); // IE6-9
}

@mixin box-shadow($shadows...) {
  -webkit-box-shadow: $shadows;
     -moz-box-shadow: $shadows;
          box-shadow: $shadows;
}

@mixin text-shadow($shadows...) {
  -webkit-text-shadow: $shadows;
     -moz-text-shadow: $shadows;
          text-shadow: $shadows;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

@mixin box-sizing($sizing) {
  -webkit-box-sizing: $sizing;
     -moz-box-sizing: $sizing;
      -ms-box-sizing: $sizing;
          box-sizing: $sizing;
}

@mixin transition($properties...) {
  -webkit-transition: $properties;
     -moz-transition: $properties;
       -o-transition: $properties;
          transition: $properties;
}