Σε περίπτωση που σας ενδιαφέρει να χειριστείτε το δικό σας πρόθεμα προμηθευτή CSS (αντί, ας πούμε, Autoprefixer ή Compass), ακολουθεί μια μίξη για να το βοηθήσετε. Αντί να προσαρτάτε κάθε γνωστό πρόθεμα σε όλα, περνάτε τα προθέματα που θέλετε να χρησιμοποιήσετε, ώστε να έχετε πιο λεπτό έλεγχο επί της εξόδου.
Απλή έκδοση
/// 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; )Χρήση:
.selector ( @include prefix(transform, rotate(45deg), webkit ms); )Παραγωγή:
.selector ( -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); )Σύνθετη έκδοση
Σημειώστε ότι αυτή η έκδοση χρησιμοποιεί χάρτες Sass, επομένως απαιτεί έκδοση 3.3 ή νεότερη.
/// 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; ) )Χρήση:
.selector ( @include prefix(( column-count: 3, column-gap: 1.5em, column-rule: 2px solid hotpink ), webkit moz); )Παραγωγή:
.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; )
