Jos olet kiinnostunut käsittelemään omia CSS-toimittajan etuliitteitä (pikemminkin kuin esimerkiksi Autoprefixer tai Compass), tässä on sekoitus, joka auttaa tässä. Sen sijaan, että vain liittäisit jokaisen tunnetun etuliitteen kaikkeen, välität sen etuliitteet, joita haluat käyttää, joten sinulla on tarkempi hallinnan ulostulo.
Yksinkertainen versio
/// 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; )Käyttö:
.selector ( @include prefix(transform, rotate(45deg), webkit ms); )Tuotos:
.selector ( -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); )Edistynyt versio
Huomaa, että tämä versio käyttää Sass-karttoja, joten vaatii version 3.3 tai uudemman.
/// 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; ) )Käyttö:
.selector ( @include prefix(( column-count: 3, column-gap: 1.5em, column-rule: 2px solid hotpink ), webkit moz); )Tuotos:
.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; )