Sekiranya anda berminat untuk menangani awalan vendor CSS anda sendiri (dan bukannya, katakanlah, Autoprefixer atau Compass), berikut adalah mixin untuk menolongnya. Daripada hanya menambahkan setiap awalan yang diketahui pada segalanya, anda memberikan awalan yang ingin anda gunakan, jadi anda mempunyai kawalan yang lebih baik terhadap output.
Versi ringkas
/// 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; )Penggunaan:
.selector ( @include prefix(transform, rotate(45deg), webkit ms); )Pengeluaran:
.selector ( -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); )Versi lanjutan
Perhatikan bahawa versi ini menggunakan peta Sass, oleh itu memerlukan 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; ) )Penggunaan:
.selector ( @include prefix(( column-count: 3, column-gap: 1.5em, column-rule: 2px solid hotpink ), webkit moz); )Pengeluaran:
.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; )