Mezclar a propiedades de prefijo | Programar Plus

En caso de que esté interesado en manejar su propio prefijo de proveedor de CSS (en lugar de, por ejemplo, Autoprefixer o Compass), aquí hay una combinación para ayudarlo con eso. En lugar de simplemente agregar cada prefijo conocido a todo, le pasa los prefijos que desea usar, por lo que tiene un control más detallado sobre la salida.

Versión sencilla

/// Mixin to prefix a property
/// @author Kitty 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;
}

Uso:

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

Producción:

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

Versión avanzada

Tenga en cuenta que esta versión utiliza mapas Sass, por lo que requiere la versión 3.3 o superior.

/// Mixin to prefix several properties at once
/// @author Kitty 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;
  }
}

Uso:

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

Producción:

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