Jika Anda tertarik untuk menangani prefiks vendor CSS Anda sendiri (daripada, katakanlah, Autoprefixer atau Compass), berikut adalah mixin untuk membantunya. Daripada hanya menambahkan setiap awalan yang diketahui ke semuanya, Anda meneruskannya ke prefiks yang ingin Anda gunakan, sehingga Anda memiliki kontrol yang lebih baik atas keluaran.
Versi sederhana
/// 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; )Pemakaian:
.selector ( @include prefix(transform, rotate(45deg), webkit ms); )Keluaran:
.selector ( -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); )Versi lanjutan
Perhatikan bahwa versi ini menggunakan peta Sass, karenanya membutuhkan versi 3.3 atau lebih tinggi.
/// 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; ) )Pemakaian:
.selector ( @include prefix(( column-count: 3, column-gap: 1.5em, column-rule: 2px solid hotpink ), webkit moz); )Keluaran:
.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; )