Juhul, kui olete huvitatud oma CSS-i tarnija eesliite (mitte näiteks Autoprefixeri või Kompassi) käitlemisest, on siin abiks see segu. Selle asemel, et kõigele teadaolev eesliide lihtsalt kõigele lisada, edastate sellele eesliited, mida soovite kasutada, nii et teil on väljundi üle täpsem kontroll.
Lihtne versioon
/// 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; )Kasutamine:
.selector ( @include prefix(transform, rotate(45deg), webkit ms); )Väljund:
.selector ( -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); )Täpsem versioon
Pange tähele, et see versioon kasutab Sassi kaarte, seega nõuab see versiooni 3.3 või uuemat.
/// 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; ) )Kasutamine:
.selector ( @include prefix(( column-count: 3, column-gap: 1.5em, column-rule: 2px solid hotpink ), webkit moz); )Väljund:
.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; )