Как использовать VOID переменную в SASS

Question

Hello World :)

Я пытаюсь написать Примеси для BOX-SHADOW собственности с помощью SASS как код ниже.

@mixin simpleBoxShadow ($inset, $xoffset, $yoffset, $blur, $spread, $color) { 
    -webkit-box-shadow: $inset $xoffset $yoffset $blur $spread $color; 
      box-shadow: $inset $xoffset $yoffset $blur $spread $color; 
    ... 
} 

И у меня есть значение INSET. Иногда это должно быть INSET, иногда просто пусто. Что я должен писать, когда использую этот MIXIN?

@include simpleBoxShadow (-what's there?- , 10px, 10px, 10px, 10px, #000000); 

Или как я могу это сделать по-другому?

Answer 1

Эти значения, разделенные пробелом, считаются lists в SASS. Вы можете использовать функцию join() для объединения списков. Таким образом, один подход должен был бы сделать что-то вроде этого:

@mixin simpleBoxShadow ($xoffset, $yoffset, $blur, $spread, $color, $inset: false) { 
    $shadow: $xoffset $yoffset $blur $spread $color; 

    @if ($inset) { 
     $shadow: join(inset, $shadow, space); 
    } 

    -webkit-box-shadow: $shadow; 
      box-shadow: $shadow; 
} 

Затем вы можете использовать свой подмешать так:

// with inset 
@include simpleBoxShadow($inset: true, 10px, 10px, 10px, 10px, #000000); 
// without inset 
@include simpleBoxShadow(10px, 10px, 10px, 10px, #000000); 

UPDATE: Вы могли бы также рассмотреть возможность использования Compass - это основа построенный поверх SASS, который обеспечивает множество функций удобства и микшинов, в том числе некоторые для box-shadow.