Example
There are some cases in mixins where there can be single or multiple arguments while using it. Let's take a case of border-radius where there can be single argument like border-radius:4px; or multiple arguments like border-radius:4px 3px 2px 1px;.
Traditional with Keyword Arguments mixing will be like below:-
@mixin radius($rad1, $rad2, $rad3, $rad4){
-webkit-border-radius: $rad1 $rad2 $rad3 $rad4;
-moz-border-radius: $rad1 $rad2 $rad3 $rad4;
-ms-border-radius: $rad1 $rad2 $rad3 $rad4;
-o-border-radius: $rad1 $rad2 $rad3 $rad4;
border-radius: $rad1 $rad2 $rad3 $rad4;
}
And used as
.foo{
@include radius(2px, 3px, 5px, 6px)
}
The above example is complex (to code, read and maintain) and if you can't pass only one value or two values, it will throw an error, and to use one, two or there values you have to define three other mixins.
By using variable Argument you don't have to worry about how many arguments can you pass. Variable arguments can be declared by defining a variable name followed by three dots(...). Following is an example of a variable argument.
@mixin radius($radius...)
{
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
And used as
.foo{
@include radius(2px 3px 5px 6px)
}
.foo2{
@include radius(2px 3px)
}
.foo3{
@include radius(2px)
}
The above example is much simpler (to code, maintain and read), you need not worry about how many arguments are about to come - is it one or more than one.
If there is more than one argument and in any case you want to access the second argument, you can do it by writing propertyname : nth(variable_name, 2).
