59 lines
1.3 KiB
SCSS
59 lines
1.3 KiB
SCSS
/* VERSION 1 ***********************************************/
|
|
/*
|
|
* Add prefix for property css
|
|
*
|
|
* @param $name : name of property
|
|
* @param $value : value of property
|
|
*
|
|
* @example
|
|
* - Usage:
|
|
* .foo {
|
|
* @inlucde prefix(transform, translateY(-50%));
|
|
* }
|
|
*/
|
|
@mixin prefix($name, $value) {
|
|
-webkit-#{$name}: $value;
|
|
-moz-#{$name}: $value;
|
|
-ms-#{$name}: $value;
|
|
-o-#{$name}: $value;
|
|
#{$name}: $value;
|
|
}
|
|
|
|
/* VERSION 2 : Avanced version ****************************************/
|
|
/*
|
|
* Mixin to prefix several properties at once
|
|
*
|
|
* @param {List} $prefixes (()) - List of prefixes to print
|
|
* @example
|
|
* - Usage:
|
|
* .foo {
|
|
* @include prefix((
|
|
* column-count: 3,
|
|
* column-gap: 1.5em,
|
|
* column-rule: 2px solid hotpink
|
|
* ), webkit moz);
|
|
* }
|
|
* - Output:
|
|
* .foo {
|
|
* -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;
|
|
*}
|
|
*/
|
|
@mixin prefixServeral($declarations, $prefixes: ()) {
|
|
@each $property, $value in $declarations {
|
|
@each $prefix in $prefixes {
|
|
#{'-' + $prefix + '-' + $property}: $value;
|
|
}
|
|
|
|
// Output standard non-prefixed declaration
|
|
#{$property}: $value;
|
|
}
|
|
}
|