Ответ 1

A DRY'r способ сделать это

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

@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

Ответ 2

Достаточно лучше DRY

- передать $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);
}

Ответ 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;
  }
}

Ответ 4

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

@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 следующим образом.

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

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

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

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

Ответ 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);
}

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

Ответ 6

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

вывод CSS точно так, как вы этого хотели, но вы должны написать свой 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;

Ответ 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);
}

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

Ответ 8

С [email protected]:

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

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

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

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

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

работает с hexa тоже

Ответ 9

Даже DRYer путь!

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

Ответ 10

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

Ответ 11

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

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

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

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

Ответ 12

Я новичок в компиляторах css, надеюсь, что это поможет,

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

Ответ 13

Вы всегда можете присвоить null вашим необязательным аргументам. Вот простое исправление

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

Ответ 14

как аргументы мы можем передать @mixing?

@mixin example($howarguments and atributes){}