Свойства Mixin to Prefix онлайн урок.


Если вы заинтересованы в обработке префикса своего собственного поставщика CSS (а не, скажем, Autoprefixer или Compass ), вот что вам поможет в микшинге. Вместо того, чтобы просто добавлять все известные префиксы ко всем, вы передаете им префиксы, которые хотите использовать, поэтому у вас есть более мелкий контроль над выходом.

# Простая версия

/// 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
@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);
}

Вывод:

.selector {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

# Расширенная версия

Обратите внимание, что эта версия использует карты Sass, поэтому требуется версия 3.3 или выше.

/// Mixin to prefix several properties at once
/// @author Hugo Giraudel
/// @param {Map} $declarations - Declarations to prefix
/// @param {List} $prefixes (()) - List of prefixes to print
@mixin prefix($declarations, $prefixes: ()) {
@each $property, $value in $declarations {
@each $prefix in $prefixes {
#{'-' + $prefix + '-' + $property}: $value;
}

// Output standard non-prefixed declaration
#{$property}: $value;
}
}

Применение:

.selector {
@include prefix((
column-count: 3,
column-gap: 1.5em,
column-rule: 2px solid hotpink
), webkit moz);
}

Вывод:

.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;
}