SASS mixins

mixins.css.scss

@mixin background_image ($filename) {
  background-image: image-url(1x/#{$filename});

  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5) {
    background-image: image-url(2x/#{$filename});
  }
}

@mixin list_style ($filename) {
  list-style: image-url(1x/#{$filename});

  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5) {
    list-style: image-url(2x/#{$filename});
  }
}

@mixin background_data ($filename) {
  background-image: asset-data-url(2x/#{$filename});
}

@mixin box_shadow ($shadow) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  -o-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin hw_accelerate {
  -webkit-transform: translateZ(0) translate3D(0,0,0);
  -moz-transform: translateZ(0) translate3D(0,0,0);
  -o-transform: translateZ(0) translate3D(0,0,0);
  -ms-transform: translateZ(0) translate3D(0,0,0);
  transform: translateZ(0) translate3D(0,0,0);
}

@mixin border_radius ($radius: 4px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}

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

@mixin transform ($transform) {
  -webkit-transform: $transform;
  -moz-transform: $transform;
  -o-transform: $transform;
  transform: $transform;
}

@mixin transition_transform ($transition) {
  -webkit-transition: $transition -webkit-transform;
  -moz-transition: $transition -moz-transform;
  -o-transition: $transition -o-transform;
  transition: $transition transform;
}

@mixin animation ($transform: background, $duration: 0.5s, $easing: ease, $delay: 0.1s) {
  -webkit-transition: $transform $duration $easing $delay;
  -moz-transition:    $transform $duration $easing $delay;  
  -o-transition:      $transform $duration $easing $delay;  
  transition:         $transform $duration $easing $delay;  
}

@mixin box_sizing ($model) {
  -webkit-box-sizing: $model;
  -moz-box-sizing: $model;
  -o-box-sizing: $model;
  box-sizing: $model;
}

@mixin background_size ($size) {
  -moz-background-size: $size;
  background-size: $size;
}

@mixin custom_gradient_background($colour_a, $colour_b, $colour_c, $stop_percent) {
  background-image: -moz-linear-gradient(left,
    rgba($colour_a, $colour_b, $colour_c, 1) 0%,
    rgba($colour_a, $colour_b, $colour_c, 0) $stop_percent,
    rgba($colour_a, $colour_b, $colour_c, 0) 100% - $stop_percent,
    rgba($colour_a, $colour_b, $colour_c, 1) 100%);
  /* FF3.6+ */
  
  background-image: -webkit-gradient(linear, left top, right top,
    color-stop(0%,                    rgba($colour_a, $colour_b, $colour_c, 1)),
    color-stop($stop_percent,         rgba($colour_a, $colour_b, $colour_c, 0)),
    color-stop(100% - $stop_percent,  rgba($colour_a, $colour_b, $colour_c, 0)),
    color-stop(100%,                  rgba($colour_a, $colour_b, $colour_c, 1)));
  /* Chrome,Safari4+ */
  
  background-image: -webkit-linear-gradient(left,
                          rgba($colour_a, $colour_b, $colour_c, 1)
    0%,                   rgba($colour_a, $colour_b, $colour_c, 0)
    $stop_percent,        rgba($colour_a, $colour_b, $colour_c, 0)
    100% - $stop_percent, rgba($colour_a, $colour_b, $colour_c, 1) 100%);
  /* Chrome10+,Safari5.1+ */

  background-image: -o-linear-gradient(left,
    rgba($colour_a, $colour_b, $colour_c,1) 0%,
    rgba($colour_a, $colour_b, $colour_c,0) $stop_percent,
    rgba($colour_a, $colour_b, $colour_c,0) 100% - $stop_percent,
    rgba($colour_a, $colour_b, $colour_c,1) 100%);
  /* Opera 11.10+ */

  background-image: -ms-linear-gradient(left,
    rgba($colour_a, $colour_b, $colour_c,1) 0%,
    rgba($colour_a, $colour_b, $colour_c,0) $stop_percent,
    rgba($colour_a, $colour_b, $colour_c,0) 100% - $stop_percent,
    rgba($colour_a, $colour_b, $colour_c,1) 100%);
  /* IE10+ */

  background-image: linear-gradient(to right,
    rgba($colour_a, $colour_b, $colour_c,1) 0%,
    rgba($colour_a, $colour_b, $colour_c,0) $stop_percent,
    rgba($colour_a, $colour_b, $colour_c,0) 100% - $stop_percent,
    rgba($colour_a, $colour_b, $colour_c,1) 100%);
  /* W3C */
}

@mixin opacity($value) {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=" + ($value * 100) + ")"; /* for IE8 in IE7 mode */
  filter: alpha(opacity=($value * 100)); /* for IE6-IE8 */
  -moz-opacity: ($value);
  opacity: ($value);
}