Kendi CSS tedarikçinizin önekini (örneğin, Autoprefixer veya Compass yerine) kullanmakla ilgileniyorsanız, işte size yardımcı olacak bir mixin. Bilinen her öneki her şeye eklemek yerine, kullanmak istediğiniz önekleri iletirsiniz, böylece çıktı üzerinde daha ince bir kontrole sahip olursunuz.
Basit versiyon
/// 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; )Kullanım:
.selector ( @include prefix(transform, rotate(45deg), webkit ms); )Çıktı:
.selector ( -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); )Gelişmiş sürüm
Bu sürümün Sass haritalarını kullandığını ve bu nedenle 3.3 veya üstünü gerektirdiğini unutmayın.
/// 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; ) )Kullanım:
.selector ( @include prefix(( column-count: 3, column-gap: 1.5em, column-rule: 2px solid hotpink ), webkit moz); )Çıktı:
.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; )