Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What are the different types of Mixin arguments ?

  • Last Updated : 23 Nov, 2021

Mixin allows us to create a CSS code that can be reused again as per requirements. The arguments are the variable names written while defining a mixin. These are separated by commas.

The mixin arguments are the SassScript values that are available as variables and that are passed when mixin is included. There are two different types of mixin arguments.

  • Keyword arguments
  • Variable arguments

Keyword arguments: The arguments are used to include in mixins. These types of arguments, if named, can be passed in any order and their default values can be skipped. Let’s look at an example for a better understanding.

SASS Code:

@mixin design($color, $height:1px) {
    color: red;
    border: $height solid black;
    height: 300px;
}
.temp {
    @include design($color:red, $height:1px);
}

This SASS code will be compiled into CSS code as follows.

CSS code: Name the following file to “style.css”.

CSS




.temp {
  color: red;
  border: 1px solid black;
  height: 300px;
}

HTML code: Let’s link out this CSS file (style.css) in the following HTML document.

HTML




<!DOCTYPE html>
<html>
<head>
  <title>Keyword Arguments</title>
  <link rel="stylesheet" 
        type="text/css" 
        href="style.css" />
</head>
<body>
  <h2>Welcome To GFG</h2>
  <p class="temp">GeeksforGeeks</p>
</body>
</html>

Output:

Variable arguments: When we need to pass an unknown number of arguments to mixin, we use variable arguments. It contains all the keyword arguments needed to be passed. These keyword arguments can be accessed later using keywords function ($args) that returns values in the form of a hash map. Let’s look at an example for a better understanding.

SASS code:

@mixin design($var) {
   color: $var;
}

$values: red, blue, green;
.temp {
   @include design($values...);
}

CSS code:

CSS




.temp {
  color: red;
}

HTML code: Let’s use this CSS file (style.css) in an HTML file.

HTML




<!DOCTYPE html>
<html>
<head>
  <title>Variable Arguments</title>
  <link rel="stylesheet" 
        type="text/css" 
        href="style.css" />
</head>
<body>
  <h2 class="temp">Welcome To GFG</h2>
  <p>Online Learning Platform</p>
</body>
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!