Sử dụng SASS mixin để thêm tiền tố css

Trong trường hợp bạn muốn thêm các tiền tố cho các style css thì sử dụng mixin là một cách rất hiệu quả. Sử dụng SASS mixin, bạn có thể kiểm soát một cách tốt hơn output mong muốn cho style của mình.

/// 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;
}

Áp dụng:

.selector {
 @include prefix(transform, rotate(45deg), webkit ms);
}

Sau khi biên dịch

.selector {
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}

/// 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;
  }
}

Áp dụng:

.selector {
 @include prefix((
   column-count: 3,
   column-gap: 1.5em,
   column-rule: 2px solid hotpink
 ), webkit moz);
}

Sau khi biên dịch

.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;
}

Source: https://css-tricks.com/snippets/sass/mixin-prefix-properties/