Piszę taki mixin:

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

Po wywołaniu tak naprawdę chcę, aby jeśli żadna $insetwartość nie została przekazana, nic nie jest generowane, zamiast kompilacji do czegoś takiego:

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

Jak przepisać mixin, aby jeśli nie $insetprzekazano żadnej wartości , nic nie zostanie wyświetlone?

DRY'R Way to zrobić

I, ogólnie rzecz biorąc, fajna sztuczka, aby usunąć cytaty.

@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 wersja 3+, możesz użyć 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);
} 

Podniosłem to tutaj: przekaż listę do miksu jako pojedynczy argument z SASS

O wiele lepszy SUCHY sposób

ma przejść $args...do @mixin. W ten sposób, bez względu na to, ile $argszdasz. W @inputrozmowie możesz przekazać wszystkie potrzebne argumenty. Tak jak:

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

A teraz możesz ponownie użyć swojego cienia w każdej klasie, przekazując wszystkie potrzebne argumenty:

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

Sass obsługuje @ifoświadczenia. (Zobacz dokumentację .)

Możesz napisać swój mixin w ten sposób:

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

Możesz ustawić właściwość z null jako wartość domyślną, a jeśli nie podasz parametru, nie zostanie on zinterpretowany.

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

Oznacza to, że możesz napisać instrukcję include w ten sposób.

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

Zamiast pisać w ten sposób.

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

Jak pokazano w odpowiedzi tutaj

Stare pytanie, wiem, ale myślę, że to jest nadal aktualne. Prawdopodobnie wyraźniejszym sposobem na to jest użycie funkcji unquote () (którą SASS ma od wersji 3.0.0):

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

Jest to w przybliżeniu odpowiednik odpowiedzi Josha, ale myślę, że wyraźnie nazwana funkcja jest mniej zaciemniona niż składnia interpolacji łańcucha.

Wiem, że nie jest to dokładnie odpowiedź, "null"której @include box-shadowszukałeś, ale możesz podać jako ostatni argument podczas miksowania, tak jak @include box-shadow(12px, 14px, 2px, green, null);teraz Teraz, jeśli ten argument jest tylko jeden w tej właściwości niż ta właściwość (a jej (domyślna) wartość) nie zostanie skompilowana . Jeśli w tej „linii” znajdują się dwa lub więcej argumentów, tylko te, które zostały zerowane, nie zostaną skompilowane (twój przypadek).

Wyjście CSS jest dokładnie takie, jak chcesz, ale musisz napisać swoje null:)

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

oto rozwiązanie, którego używam, z notatkami poniżej:

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

• wolą przekazywać wartości właściwości jako natywne css, aby pozostać blisko „języka”
• pozwalają na przekazywanie zmiennej liczby argumentów
• zdefiniuj domyślną wartość lenistwa

Z [email protected]:

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

i użyj bez wartości, przycisk będzie niebieski

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

i wartości, przycisk będzie czerwony

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

działa również z hexa

Nawet OSUSZANIE!

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

A teraz możesz ponownie wykorzystać swój cień-pudełko jeszcze mądrzej:

.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 prosty sposób

Wystarczy dodać wartość domyślną nonedo $ inset - więc

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

Teraz, gdy nie zostanie przekazana żadna wstawka $, nic nie będzie wyświetlane.

Zawsze możesz przypisać null swoim opcjonalnym argumentom. Oto prosta poprawka

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

Jestem nowy w kompilatorach css, mam nadzieję, że to pomoże,

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