Some Mixins

_mixins.scss

/**
 * Some mixins I use when not including compass/bourbon in project.
 */

@mixin vendor($property, $value) {
  -webkit-#{$property}:$value;
  -moz-#{$property}:$value;
  -ms-#{$property}:$value;
  -o-#{$property}:$value;
  #{$property}:$value;
}

/**
 * @vendor
 *
 * Basic mixin for all prefixed properties.
 * eg. @include vendor(trasition, all 0.2s linear);
 */

/* ========================================= */

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

/**
 * @box-shadow
 *
 * eg. @include box-shadow(1px 0 1px 0 #333, 1px 1px 1px 0 #000, 0 0 1px 0 #ccc inset);
 */

/* ========================================= */

@mixin linear-gradient($direction, $gradients...) {
  background-image: -webkit-gradient(linear, $direction, $gradients);
  background-image: -webkit-linear-gradient($direction, $gradients);
  background-image: -moz-linear-gradient($direction, $gradients);
  background-image: -o-linear-gradient($direction, $gradients);
  background-image: linear-gradient($direction, $gradients);
}

/**
 * @linear-gradient
 *
 * eg. @include linear-gradient(top, #fff 33%, #999 66%, #444 99%);
 */

/* ========================================= */

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-o-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}