Mixin zum Präfixen von Eigenschaften

Falls Sie sich für die eigene Verwaltung von CSS-Herstellerpräfixen interessieren (anstelle von z.B. Autoprefixer oder Compass), hier ist ein Mixin, das Ihnen dabei hilft. Anstatt einfach jedes bekannte Präfix an alles anzuhängen, übergeben Sie ihm die Präfixe, die Sie verwenden möchten, sodass Sie eine feinere Kontrolle über die Ausgabe haben.

Einfache Version

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

Verwendung

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

Ausgabe

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

Fortgeschrittene Version

Beachten Sie, dass diese Version Sass-Maps verwendet und daher Version 3.3 oder höher erfordert.

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

Verwendung

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

Ausgabe

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