How to make Sass mixin more robust

Question

Description

I have the following mixin:

@mixin insideBorder ($thickness:2px, $color:black, $alpha:.05) {
    box-shadow:inset 0 0 0 $thickness rgba($color, $alpha);
}

A. One way to use it is like this:

@include insideBorder();

Which will output:

box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.05);

B. I can also use it like this:

@include insideBorder(5px, red);

Which will output:

box-shadow: inset 0 0 0 2px rgba(255, 0, 0, 0.05);

Problems

However, if I only want to change the color, I would do one of these two ways:

1. @include insideBorder(#369);
2. @include insideBorder(red);

But then I it would compile to:

1. box-shadow: inset 0 0 0 #336699 rgba(0, 0, 0, 0.05);
2. box-shadow: inset 0 0 0 red rgba(0, 0, 0, 0.05);

Or if I do this:

• @include insideBorder(red, .5);

It shoots an error:

Syntax error: $color: 0.5 is not a color for 'rgba'...

Question

How can I improve this mixin so that it can take any amount of arguments but depending on the type of argument the mixin "knows" where it belongs?

Answer 1

Use this sass script i made & improved by @Eric M Suzanne

DEMO

$insideBorderThickness: 2px !default;
$insideBorderColor: black !default;
$insideBorderAlpha: .05 !default;

@mixin insideBorder($values...) {
    $borderThickness: $insideBorderThickness;
    $borderColor: $insideBorderColor;
    $borderAlpha: $insideBorderAlpha;

    @each $value in $values {
        @if type_of($value) == number {
            @if unit($value) == "" {
                $borderAlpha: $value;
            } @else {
                $borderThickness: $value;
            }
        } @else if type_of($value) == color {
            $borderColor: $value;
        }
    }

    box-shadow: inset 0 0 0 $borderThickness rgba($borderColor, $borderAlpha);
}

Then you can use @include like this:

@include insideBorder();

OR

@include insideBorder(20px);

OR

@include insideBorder(blue);

OR

@include insideBorder(.6);

OR

@include insideBorder(3em, orange, .5);

LOGIC:

• First default values are defined for the box-shadow.

• When insideBorder() mixin is used it will assign the default values to inner variables (to avoid default values getting changed on each call of the mixin).

• Next it will check if the value type is "number" & assign it to alpha variable & if the type is number with any other measurement unit like em-px-rm, it will be assigned to thickness & if the type is color, it will be assigned to color variable.

• finally it will create the box shadow css depending on the variable values.

Answer 2

your Mixin is fine. Use this technique to include:

@include insideBorder($thickness: 3px, $color: black, $alpha: .1);

OR ~ change thickness & alpha

@include insideBorder($thickness: 3px, $alpha: .1);

OR ~ change only alpha

@include insideBorder($alpha: .1);

This way you are being specific by telling which value will go to which variable.

you can read more HERE