Jei norite susidoroti su savo CSS tiekėjo priešdėliais (o ne, tarkime, su „Autoprefixer“ ar „Compass“), čia yra „mixin“. Užuot tik pridėję kiekvieną žinomą priešdėlį prie visko, jūs perduodate jam norimus naudoti priešdėlius, kad galėtumėte geriau kontroliuoti išvestį.
Paprasta 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; )Naudojimas:
.selector ( @include prefix(transform, rotate(45deg), webkit ms); )Išvestis:
.selector ( -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); )Išplėstinė versija
Atminkite, kad šioje versijoje naudojami „Sass“ žemėlapiai, todėl reikalinga 3.3 ar naujesnė versija.
/// 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; ) )Naudojimas:
.selector ( @include prefix(( column-count: 3, column-gap: 1.5em, column-rule: 2px solid hotpink ), webkit moz); )Išvestis:
.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; )