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.

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

Á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);
}

Phiên bản nâng cao

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