Useful Sass Mixins

useful_sass_mixins.scss

@mixin transition($transition-property, $transition-time, $method) {
  // These two cover pretty much everything from 2008. Apart from IE 6-9. But fuck that prick of a browser.
  -webkit-transition: $transition-property $transition-time $method; // Need this for Chrome pre-dating 2013 and Safari 3 - 6
  transition: $transition-property $transition-time $method;
}
// Example use: @include transition(all, 0.5s, ease);

@mixin vertical-align($position) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
// Example use: @include vertical-align(relative);

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
// Example use: @include border-radius(26px);

@mixin background-size($background-size) {
  -webkit-background-size: $background-size;
     -moz-background-size: $background-size;
       -o-background-size: $background-size;
          background-size: $background-size;
}
// Example use: @include background-size(cover);

@mixin background-cover($horizontal-position, $vertical-position: center, $background-attachment: scroll) {
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: $horizontal-position $vertical-position;
  background-attachment: $background-attachment;
}
// Example use: @include background-cover(center, center, fixed);

@mixin transform-scale($value) {
  -webkit-transform: scale($value);
     -moz-transform: scale($value);
          transform: scale($value);
}
// Example use: @include transform-scale(1.15);

@mixin transform-origin($x_axis, $y_axis) {
  -webkit-transform-origin: $x_axis $y_axis; // Chrome, Safari, Opera
     -moz-transform-origin: $x_axis $y_axis; // IE 9
          transform-origin: $x_axis $y_axis;
}
// Example use: @include transform-origin(0, 50%);

@mixin filter-grayscale($value) {
  -webkit-filter: #{"grayscale(#{$value})"};
     -moz-filter: #{"grayscale(#{$value})"};
          filter: #{"grayscale(#{$value})"};
}
// Example use: @include filter-grayscale(80);

@mixin placeholder {
  &::-webkit-input-placeholder { @content; }
           &::-moz-placeholder { @content; }
            &:-moz-placeholder { @content; }
                 &.placeholder { @content; }
}
// Example use: @include placeholder {font-size: 12px;}

@mixin vertical-background-gradient($top-color, $bottom-color) {
  background: $bottom-color; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient($top-color, $bottom-color); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient($top-color, $bottom-color); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient($top-color, $bottom-color); /* For Firefox 3.6 to 15 */
  background: linear-gradient($top-color, $bottom-color); /* Standard syntax */
}
// Example use: @include vertical-background-gradient(#000, #FFF);

@mixin horizontal-background-gradient($left-color, $right-color) {
  background: $left-color; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, $left-color, $right-color); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, $left-color, $right-color); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, $left-color, $right-color); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, $left-color, $right-color); /* Standard syntax */
}
// Example use: @include horizontal-background-gradient(#FFF, #000);

@mixin radial-gradient($inner-color, $outer-color) {
  background: $inner-color; // For browsers that do not support gradients
  background: -webkit-radial-gradient($inner-color,$outer-color); // Chrome 10-25 Safari 5.1-6 note direction is opposite
  background: -moz-radial-gradient($inner-color,$outer-color); // Fx 3.6-15
  background: radial-gradient($inner-color,$outer-color); // Standard
}
// Example use: @include radial-gradient(#FFF, #000);

@mixin box-shadow($h-offset, $v-offset, $blur, $shadow-color) {
    -webkit-box-shadow: $h-offset $v-offset $blur $shadow-color;
    box-shadow: $h-offset $v-offset $blur $shadow-color;
}
// Example use: @include box-shadow(3px, 3px, 4px, rgba(0,0,0,0.3));

@mixin translate($horizontal, $vertical) {
  -webkit-transform: translate($horizontal, $vertical); /* Safari */
  transform: translate($horizontal, $vertical);
}
// Example use: @include translate(-50%, -50%);