Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----
// Prefixing mixin
// ----------
// @param [map] $map: property/value pairs to be prefixed
// @param [list] $vendors: vendor prefixes to use
// ----------
@mixin prefix($map, $vendors: "webkit") {
// Loop through properties
@each $prop, $value in $map {
// If $vendors is not false
@if $vendors {
// Loop through vendors to dump prefixed property
@each $vendor in $vendors {
#{"-" + $vendor + "-" + $prop}: #{$value};
}
}
// Dump regular property anyway
#{$prop}: #{$value};
}
}
.default-prefix {
@include prefix((
transform: rotate(42deg)
));
}
.multiple-properties {
@include prefix((
transform: rotate(42deg),
perspective: 1337
));
}
.moar-prefixes {
@include prefix((
transform: rotate(42deg)
), "webkit" "moz");
}
.no-prefix {
@include prefix((
transform: rotate(42deg)
), false);
}
.default-prefix {
-webkit-transform: rotate(42deg);
transform: rotate(42deg);
}
.multiple-properties {
-webkit-transform: rotate(42deg);
transform: rotate(42deg);
-webkit-perspective: 1337;
perspective: 1337;
}
.moar-prefixes {
-webkit-transform: rotate(42deg);
-moz-transform: rotate(42deg);
transform: rotate(42deg);
}
.no-prefix {
transform: rotate(42deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.