Trong trường hợp bạn quan tâm đến việc xử lý tiền tố của nhà cung cấp CSS của riêng mình (thay vì, giả sử, Autoprefixer hoặc La bàn), đây là một mixin để trợ giúp điều đó. Thay vì chỉ thêm mọi tiền tố đã biết vào mọi thứ, bạn chuyển cho nó những tiền tố bạn muốn sử dụng, vì vậy bạn có quyền kiểm soát chi tiết hơn đối với đầu ra.
Phiên bản đơn giản
/// 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; )Sử dụng:
.selector ( @include prefix(transform, rotate(45deg), webkit ms); )Đầu ra:
.selector ( -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); )Phiên bản nâng cao
Lưu ý rằng phiên bản này sử dụng bản đồ Sass, do đó yêu cầu phiên bản 3.3 trở lê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; ) )Sử dụng:
.selector ( @include prefix(( column-count: 3, column-gap: 1.5em, column-rule: 2px solid hotpink ), webkit moz); )Đầu ra:
.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; )