Question

Hello World 🙂

I’m trying to write MIXINS for BOX-SHADOW property using SASS like code below.

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

And I’m stucked with INSET value. Sometimes it should be INSET, sometimes just void.
What should I write when I’m using this MIXIN?

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

Or how can I do it another way?

Answer 1

Those space-separated values are considered lists in SASS. You can use the join() function to join lists together. So one approach would be to do something like this:

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

Then you can use your mixin like this:

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

UPDATE: you might also want to consider using Compass – it’s a framework built on top of SASS that provides lots of convenience functions and mixins, including some for box-shadow.