Ist es möglich, um eine überlastung in sass-Mixins in Verbindung?

Lassen Sie sagen, Sie haben ein mixin für shadow wie:

@mixin box-shadow($offset, $blur, $color)
{
   -moz-box-shadow: $offset $offset $blur $color;
   -webkit-box-shadow: $offset $offset $blur $color;
   box-shadow: $offset $offset $blur $color;
}

Ist es möglich, überlastung, mixin mit so etwas wie:

@mixin box-shadow($offset, $blur)
{
    @include box-shadow($offset, $blur, #999);
}

Oder muss ich die verwenden unterschiedliche Namen für die Mixins in Verbindung?

  • Nur als Tipp, verwalten vendor-Präfixe in sass ist schwer, web-Browser werden ständig aktualisiert und es ist schwer zu mantain unseren code, um es zu halten richtig läuft mit jedem update, so empfehle ich die Verwendung von autoprefixer
InformationsquelleAutor Tomas Jansson | 2011-10-07
  1. 23

    Kann man nicht überlasten, aber die gängige Praxis wäre, um Standardwerte.

     /* this would take color as an arg, or fall back to #999 on a 2 arg call */
 @mixin box-shadow($offset, $blur, $color: #999) {
   -webkit-box-shadow: $offset $offset $blur $color;
   -moz-box-shadow: $offset $offset $blur $color;
   box-shadow: $offset $offset $blur $color;
 }
    • Süß... aber das ist im Grunde überladen :).
    • Obwohl es funktioniert in deinem Fall nicht wirklich überladen an alle: Überlastung würde es ermöglichen, dass Sie zwei separate Mixins in Verbindung mit diesem border-radius( $radius ); und border-radius($top-corners, $bottom-corners)
    • Auch das geht nicht, wenn die vorhandenen Mixins ist Teil einer Hersteller-Bibliothek, die Sie nicht können oder nicht wollen, zu ändern.
    • das ist, warum ich hier bin
    InformationsquelleAutor numbers1311407
  2. 3

    Wenn Sie brauchen, um zu zwicken, ein Anbieter mixin leicht können Sie es kopieren, auf eine andere Datei enthalten, die nach dem original - und Bearbeiten Sie es dort, und der Verkäufer original werden ignoriert.

    @import "_their-mixins";
@import "_our-mixins";

    Warnung - dies kann davon abhängen, welchen Prozessor Sie verwenden. Zum Zeitpunkt des Schreibens, es funktioniert Super mit grunt und grunt-contrib-compass

    • Ja, Grunzen tut es - Schluck! - nicht
    InformationsquelleAutor CodeMonkey
  3. 2

    @numbers1311407 Lösung richtig ist, aber Sie können die @jeder Richtlinie zu erstellen, die eine kürzere mixin:

    @mixin box-shadow($offset, $blur, $color: #999) {
  @each $prefix in -moz-, -webkit-, null {
    #{$prefix}box-shadow: $offset $offset $blur $color;
  }
}
    InformationsquelleAutor Alex Guerrero
Schreibe einen Kommentar