css - How to make Sass mixin more robust -

description

i have following mixin:

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

a. 1 way use this:

@include insideborder();

which output:

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

b. can use this:

@include insideborder(5px, red);

which output:

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

problems

however, if want change color, 1 of these 2 ways:

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

but 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 this:

• @include insideborder(red, .5);

it shoots error:

syntax error: $color: 0.5 not color 'rgba'...

question

how can improve mixin can take amount of arguments depending on type of argument mixin "knows" belongs?

use sass script made & improved @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 can use @include 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 defined box-shadow.

• when insideborder() mixin used assign default values inner variables (to avoid default values getting changed on each call of mixin).

• next check if value type "number" & assign alpha variable & if type number other measurement unit em-px-rm, assigned thickness & if type color, assigned color variable.

• finally create box shadow css depending on variable values.