Создание Sass Mixin с необязательными аргументами

Question

Я пишу миксин так:

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

При вызове я действительно хочу, чтобы при отсутствии значения $inset ничего не выводилось, а компилировалось в нечто вроде этого:

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

Как переписать миксин, чтобы при отсутствии значения $inset ничего не выводилось?

Answer 1

СУХОЙ способ сделать это

И, как правило, аккуратный трюк для удаления цитат.

@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+, выможно использовать 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);
} 

Взял это здесь: передать список в mixin в качестве единственного аргумента с SASS

Answer 2

Намного лучший способ СУХОГО

- передать $args... в @mixin.Таким образом, независимо от того, сколько $args вы пройдете.В вызове @input вы можете передать все необходимые аргументы.Вот так:

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

И теперь вы можете повторно использовать свою тень от коробки в каждом классе, который вам нужен, передав все необходимые аргументы:

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

Answer 3

Sass поддерживает @if операторы. (См. документацию .)

Вы можете написать свой миксин так:

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

Answer 4

Вы можете поместить свойство со значением NULL в качестве значения по умолчанию, и если вы не передадите параметр, оно не будет интерпретироваться.

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

Это означает, что вы можете написать оператор включения следующим образом.

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

Вместо того, чтобы писать это так.

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

Как показано в ответе здесь

Answer 5

Старый вопрос, я знаю, но я думаю, что это все еще актуально.Возможно, более ясный способ сделать это - использовать функцию unquote () (которая была в SASS начиная с версии 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);
}

Это примерно эквивалентно ответу Джоша, но я думаю,именованная функция менее запутана, чем синтаксис интерполяции строк.

Answer 6

Я знаю, что это не совсем тот ответ, который вы искали, но вы можете передать "null" в качестве последнего аргумента, когда @include box-shadow mixin, например @include box-shadow(12px, 14px, 2px, green, null); Теперь, если этот аргумент только один в этом свойстве, чем это свойство и его (значение по умолчанию) не будет скомпилировано. Если в этой «строке» есть два или более аргументов, только те, которые вы обнулили, не будут скомпилированы (ваш случай).

Вывод CSS точно такой, как вы хотели, но вы должны написать свои null s:)

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

Answer 7

вот решение, которое я использую, с примечаниями ниже:

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

• предпочитают передавать значения свойств в качестве нативного css, чтобы оставаться близко к "языку"
• разрешать передачу переменнойколичество аргументов
• определяет значение по умолчанию для лени

Answer 8

Даже СУХОЙ способ!

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

И теперь вы можете использовать свою коробку-тень еще умнее:

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

Answer 9

с sass@3.4.9:

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

и используйте без значения, кнопка будет синей

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

и со значением кнопка будет красной

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

тоже работает с гекса

Answer 10

Супер простой способ

Просто добавьте значение по умолчанию none к $ inset - так что

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

Теперь, когда $ inset не пропущено, ничего не будет отображаться.