What are the different types of Mixin arguments ?
Last Updated :
22 May, 2023
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 “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.
Example: Here is the implementation of the above steps.
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 the 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:
HTML code: Let’s use this CSS file (style.css) in an HTML file.
Example: Here is the final code of the above approach.
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...