Ich schreibe einen Mixin wie diesen:

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
    -webkit-box-shadow: $top $left $blur $color $inset;
    -moz-box-shadow: $top $left $blur $color $inset;
    box-shadow: $top $left $blur $color $inset;
}

Wenn ich aufgerufen werde, möchte ich wirklich, dass $insetnichts ausgegeben wird, wenn kein Wert übergeben wird, anstatt zu etwas wie diesem kompiliert zu werden:

-webkit-box-shadow: 2px 2px 5px #555555 "";
-moz-box-shadow: 2px 2px 5px #555555 "";
box-shadow: 2px 2px 5px #555555 "";

Wie schreibe ich das Mixin so um, dass $insetnichts ausgegeben wird , wenn es keinen Wert für übergeben gibt?

Eine trockene Art, es zu tun

Und im Allgemeinen ein guter Trick, um die Anführungszeichen zu entfernen.

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color #{$inset};
  -moz-box-shadow:    $top $left $blur $color #{$inset};
  box-shadow:         $top $left $blur $color #{$inset};
}

SASS Version 3+ können Sie verwenden unquote():

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color unquote($inset);
  -moz-box-shadow:    $top $left $blur $color unquote($inset);
  box-shadow:         $top $left $blur $color unquote($inset);
} 

Habe das hier aufgegriffen: Übergebe eine Liste als einzelnes Argument mit SASS an ein Mixin

Ein viel besserer trockener Weg

ist an die $args...zu übergeben @mixin. Auf diese Weise, egal wie viele $argsSie passieren werden. Im @inputAufruf können Sie alle benötigten Argumente übergeben. Wie so:

@mixin box-shadow($args...) {
  -webkit-box-shadow: $args;
  -moz-box-shadow: $args;
  box-shadow: $args;
}

Und jetzt können Sie Ihren Box-Shadow in jeder gewünschten Klasse wiederverwenden, indem Sie alle erforderlichen Argumente übergeben:

.my-box-shadow {
  @include box-shadow(2px 2px 5px #555, inset 0 0 0);
}

Sass unterstützt @ifAussagen. (Siehe Dokumentation .)

Sie könnten Ihr Mixin so schreiben:

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  @if $inset != "" {
    -webkit-box-shadow:$top $left $blur $color $inset;
    -moz-box-shadow:$top $left $blur $color $inset;
    box-shadow:$top $left $blur $color $inset;
  }
}

Sie können die Eigenschaft mit null als Standardwert festlegen. Wenn Sie den Parameter nicht übergeben, wird er nicht interpretiert.

@mixin box-shadow($top, $left, $blur, $color, $inset:null) {
  -webkit-box-shadow: $top $left $blur $color $inset;
  -moz-box-shadow:    $top $left $blur $color $inset;
  box-shadow:         $top $left $blur $color $inset;
}

Dies bedeutet, dass Sie die include-Anweisung wie folgt schreiben können.

@include box-shadow($top, $left, $blur, $color);

Anstatt es so zu schreiben.

@include box-shadow($top, $left, $blur, $color, null);

Wie in der Antwort hier gezeigt

Alte Frage, ich weiß, aber ich denke, das ist immer noch relevant. Ein klarerer Weg, dies zu tun, ist wohl die Verwendung der Funktion unquote () (die SASS seit Version 3.0.0 hat):

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color unquote($inset);
  -moz-box-shadow: $top $left $blur $color unquote($inset);
  box-shadow: $top $left $blur $color unquote($inset);
}

Dies entspricht in etwa Joshs Antwort, aber ich denke, die explizit benannte Funktion ist weniger verschleiert als die Syntax der String-Interpolation.

Ich weiß, dass es nicht genau die Antwort ist, nach der Sie gesucht haben, aber Sie könnten "null"beim @include box-shadowMischen wie dieses als letztes Argument übergeben. @include box-shadow(12px, 14px, 2px, green, null);Wenn dieses Argument nur eines in dieser Eigenschaft ist, wird diese Eigenschaft (und ihr (Standard-) Wert) nicht kompiliert . Wenn sich in dieser "Zeile" zwei oder mehr Argumente befinden, werden nur diejenigen, die Sie auf Null gesetzt haben, nicht kompiliert (Ihr Fall).

Die CSS-Ausgabe ist genau so, wie Sie es wollten, aber Sie müssen Ihre nulls schreiben :)

  @include box-shadow(12px, 14px, 2px, green, null);

  // compiles to ...

  -webkit-box-shadow: 12px 14px 2px green;  
  -moz-box-shadow: 12px 14px 2px green;  
  box-shadow: 12px 14px 2px green;

Hier ist die Lösung, die ich benutze, mit Anmerkungen unten:

@mixin transition($trans...) {
  @if length($trans) < 1 {
    $trans: all .15s ease-out;
  }
  -moz-transition: $trans;
  -ms-transition: $trans;
  -webkit-transition: $trans;
  transition: $trans;
}

.use-this {
  @include transition;
}

.use-this-2 {
  @include transition(all 1s ease-out, color 2s ease-in);
}

• Übergeben Sie lieber Eigenschaftswerte als native CSS, um in der Nähe von "der Zunge" zu bleiben.
• Übergeben Sie eine variable Anzahl von Argumenten
• Definieren Sie einen Standardwert für Faulheit

Mit [email protected]:

// declare
@mixin button( $bgcolor:blue ){
    background:$bgcolor;
}

Bei Verwendung ohne Wert ist die Schaltfläche blau

//use
.my_button{
    @include button();
}

und mit Wert wird die Schaltfläche rot angezeigt

//use
.my_button{
    @include button( red );
}

funktioniert auch mit hexa

Noch trockener!

@mixin box-shadow($args...) {
  @each $pre in -webkit-, -moz-, -ms-, -o- {
    #{$pre + box-shadow}: $args;
  } 
  #{box-shadow}: #{$args};
}

Und jetzt können Sie Ihren Box-Shadow noch intelligenter wiederverwenden:

.myShadow {
  @include box-shadow(2px 2px 5px #555, inset 0 0 0);
}

@mixin box-shadow($left: 0, $top: 0, $blur: 6px, $color: hsla(0,0%,0%,0.25), $inset: false) {
    @if $inset {
        -webkit-box-shadow: inset $left $top $blur $color;
        -moz-box-shadow: inset $left $top $blur $color;
        box-shadow: inset $left $top $blur $color;
    } @else {
        -webkit-box-shadow: $left $top $blur $color;
        -moz-box-shadow: $left $top $blur $color;
        box-shadow: $left $top $blur $color;
    }
}

Super einfacher Weg

Fügen Sie einfach einen Standardwert von none$ inset hinzu - also

@mixin box-shadow($top, $left, $blur, $color, $inset: none) { ....

Wenn jetzt kein $ inset übergeben wird, wird nichts angezeigt.

Sie können Ihren optionalen Argumenten jederzeit null zuweisen. Hier ist eine einfache Lösung

@mixin box-shadow($top, $left, $blur, $color, $inset:null) { //assigning null to inset value makes it optional
    -webkit-box-shadow: $top $left $blur $color $inset;
    -moz-box-shadow: $top $left $blur $color $inset;
    box-shadow: $top $left $blur $color $inset;
}

Ich bin neu in CSS-Compilern, hoffe das hilft,

        @mixin positionStyle($params...){

            $temp:nth($params,1);
            @if $temp != null{
            position:$temp;
            }

             $temp:nth($params,2);
            @if $temp != null{
            top:$temp;
            }

             $temp:nth($params,3);
            @if $temp != null{
            right:$temp;
            }

             $temp:nth($params,4);
            @if $temp != null{
            bottom:$temp;
            }

            $temp:nth($params,5);
            @if $temp != null{
            left:$temp;
            }

    .someClass{
    @include positionStyle(absolute,30px,5px,null,null);
    }

//output

.someClass{
position:absolute;
 top: 30px;
 right: 5px;
}