You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.2 KiB
SCSS
45 lines
1.2 KiB
SCSS
// Mixins thanks to https://css-tricks.com/snippets/sass/mixin-prefix-properties/
|
|
|
|
|
|
/// Mixin to prefix a property
|
|
/// @author Hugo Giraudel
|
|
/// @param {String} $property - Property name
|
|
/// @param {*} $value - Property value
|
|
/// @param {List} $prefixes (()) - List of prefixes to print
|
|
|
|
//example: @include prefix(transform, rotate(45deg), webkit ms);
|
|
|
|
@mixin prefix($property, $value, $prefixes: ()) {
|
|
@each $prefix in $prefixes {
|
|
#{'-' + $prefix + '-' + $property}: $value;
|
|
}
|
|
|
|
// Output standard non-prefixed declaration
|
|
#{$property}: $value;
|
|
}
|
|
|
|
|
|
/// Mixin to prefix several properties at once
|
|
/// @author Hugo Giraudel
|
|
/// @param {Map} $declarations - Declarations to prefix
|
|
/// @param {List} $prefixes (()) - List of prefixes to print
|
|
|
|
//example:
|
|
// @include prefix((
|
|
// column-count: 3,
|
|
// column-gap: 1.5em,
|
|
// column-rule: 2px solid hotpink
|
|
// ), webkit moz);
|
|
|
|
@mixin prefix-group($declarations, $prefixes: ()) {
|
|
@each $property, $value in $declarations {
|
|
@each $prefix in $prefixes {
|
|
#{'-' + $prefix + '-' + $property}: $value;
|
|
}
|
|
|
|
// Output standard non-prefixed declaration
|
|
#{$property}: $value;
|
|
}
|
|
}
|
|
|