SASS Mixin Arguments

by Online Tutorials Library July 14, 2022

Sass mixin arguments

The mixin arguments are SassScript values that are passed when mixin is included and are available as variable.

The argument is a name of a variable separated by a comma while defining a mixin. There are two types of mixin arguments in Sass.

Keyword Arguments
Variable Arguments

Keyword Arguments

The keyword arguments are used to include in mixins. It specifies that the named arguments can be passed in any order and the default value of arguments can be omitted.

SCSS Syntax:

  @mixin bordered($color, $width: 2px) {    color: #77C1EF;    border: $width solid black;    width: 500px;  }  .style  {    @include bordered($color:#77C1EF, $width: 5px);  }   

After the compilation, you will get the following CSS code.

CSS :

Variable Argument

The variable arguments are used to pass any number of arguments to mixin. It is used when you would be dealing with an unknown number of arguments. It contains keyword arguments passed to the function or mixin. The passed keyword arguments can be accessed using keywords($args) function which return values mapped to String.

SCSS Syntax:

  @mixin linear-gradient($direction, $gradients…) {    background-color: nth($gradients, 1);    background-image: linear-gradient($direction, $gradients…);  }  .selector {    @include linear-gradient(to right, magenta, red, orange, yellow, green, blue, purple);  }  

After the compilation, you will get the following CSS code.

CSS:

  .selector {    background-color: magenta;    background-image: linear-gradient(to right, magenta, red, orange, yellow, green, blue, purple); }  

Next TopicPassing Content Block

SASS Mixin Arguments

Sass mixin arguments

Keyword Arguments

Variable Argument

Advantages and Disadvantages of RxJS

Feature of Scala

You may also like