Falls Sie daran interessiert sind, Ihr eigenes CSS-Herstellerpräfix zu verwenden (anstatt beispielsweise Autoprefixer oder Compass), finden Sie hier ein Mixin, das Ihnen dabei hilft. Anstatt nur jedes bekannte Präfix an alles anzuhängen, übergeben Sie ihm die Präfixe, die Sie verwenden möchten, damit Sie die Ausgabe genauer steuern können.
Einfache Version
/// 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; )Verwendung:
.selector ( @include prefix(transform, rotate(45deg), webkit ms); )Ausgabe:
.selector ( -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); )Erweiterte Version
Beachten Sie, dass diese Version Sass-Maps verwendet und daher Version 3.3 oder höher erfordert.
/// 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; ) )Verwendung:
.selector ( @include prefix(( column-count: 3, column-gap: 1.5em, column-rule: 2px solid hotpink ), webkit moz); )Ausgabe:
.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; )