Gadījumā, ja jūs interesē apstrādāt savu CSS pārdevēja prefiksu (nevis, piemēram, Autoprefixer vai Compass), šeit ir pievienots papildinājums. Tā vietā, lai vienkārši pievienotu visu zināmo prefiksu visam, jūs nododat tos prefiksus, kurus vēlaties izmantot, tāpēc jums ir precīzāka kontrole pār izvadi.
Vienkārša versija
/// 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; )Lietošana:
.selector ( @include prefix(transform, rotate(45deg), webkit ms); )Izeja:
.selector ( -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); )Papildu versija
Ņemiet vērā, ka šajā versijā tiek izmantotas Sass kartes, tāpēc nepieciešama versija 3.3 vai jaunāka.
/// 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; ) )Lietošana:
.selector ( @include prefix(( column-count: 3, column-gap: 1.5em, column-rule: 2px solid hotpink ), webkit moz); )Izeja:
.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; )