// 1
@mixin crossBrowser($property, $val){
-webkit-#{$property}: $val;
-moz-#{$property}: $val;
-ms-#{$property}: $val;
#{$property}: $val;
}
// 2
@mixin prefix($property, $value, $prefixes: ()) {
@each $prefix in $prefixes {
#{'-' + $prefix + '-' + $property}: $value;
}
// Output standard non-prefixed declaration
#{$property}: $value;
}
.selector {
@include prefix(transform, rotate(45deg), webkit ms);
}
//3
@mixin prefix($declarations, $prefixes: ()) {
@each $property, $value in $declarations {
@each $prefix in $prefixes {
#{'-' + $prefix + '-' + $property}: $value;
}
// Output standard non-prefixed declaration
#{$property}: $value;
}
}
// how to use
.selector {
@include prefix((
column-count: 3,
column-gap: 1.5em,
column-rule: 2px solid hotpink
), webkit moz);
}
// output
.selector {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1.5em;
-moz-column-gap: 1.5em;
column-gap: 1.5em;
-webkit-column-rule: 2px solid hotpink;
-moz-column-rule: 2px solid hotpink;
column-rule: 2px solid hotpink;
}