Skip to content

Instantly share code, notes, and snippets.

@heartcode
Created November 9, 2012 11:09
Show Gist options
  • Save heartcode/4045182 to your computer and use it in GitHub Desktop.
Save heartcode/4045182 to your computer and use it in GitHub Desktop.
SASS mixins
@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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment