Sass Mixin Directives

Arguments in Mixin

A mixin can accept and use arguments which makes them powerful compared to @extend directives.

Example:

Given an example where we try to include a background color in the same mixin we have defined previously, this job becomes very easy with the help of argument.

@mixin button($background) {  
	font-size: 2em;  
	padding: 0.7em 1.0em;  
	text-decoration: none;  
	color: black; 
	background: $background;  
}

Here, we can pass the color we want in the argument of our mixin.

.newbutton{  
	@include button(purple);  
}

When this SCSS file complies, the color purple is passed to the mixin, and it becomes the value of the variable background.

We can pass multiple arguments in @mixin and @include by separating them with a comma.

Default Values

In the above example, we defined an argument and passed a value assigned to the specific variable after compilation. But, it will generate an error if no value is passed to the argument. To avoid such a situation, we must set a default value when defining a mixin.

@mixin button($background: white) {  
	font-size: 2em;  
	padding: 0.7em 1.0em;  
	text-decoration: none;  
	color: black; 
	background: $background;  
}
.newbutton{  
	@include button;  
}

The color white will be assigned to the variable background as the default value in this situation. If we supply a value to the mixin, it will overwrite the default one.

Keyword Arguments

Keyword arguments help make the code more understandable by adding additional information. We can add the argument name and its value, making it comparatively easy to understand what those values stand for. 

Example 1:

.button-green {  
	@include button(white, black);  
}

Example 2:

.newbutton{  
	@include button($background: white, $color: black);
}

We can easily conclude from both the above examples that it is easy to understand the document when written in example 2 format.

Passing both the keyword and value is also known as Named Argument. The basic arguments need to be called in a particular order which is not the case in the named arguments; we can pass argument in any specific order.

Variable Arguments

A mixin can take multiple arguments. When adding a style to the document, it may vary from person to person. We can create a mixin that accepts numerous arguments and lets users decide how many they want to add. This argument is also known as an argument list. Consider the following example:

Example:

@mixin boxshadows($shadow...) {  
	boxshadow: $shadow;  
}
.container {  
	@include boxshadows(1px 2px 3px grey, 4px 5px 4px #ccc);  
}

In the above example, we allow a user to add multiple arguments by adding three dots (...) at the end of the variable name.

Recommended Readings: Difference between argument and parameter

Frequently Asked Questions

1. What are nested rules in SASS?
   Nesting in SASS is a method of combining multiple logic structures within one another. Various CSS rules are connected in Sass. E.g., if we are using numerous selectors, we can use one selector inside another to create compound selectors.
    
2. What uses DRY-ing out a Mixin function in Sass?
   DRY-ing out a Mixin function splits further into two parts:
   Static part: It contains the pieces of information that would otherwise get duplicated.
   Dynamic part: It is the function that the user will call.
    
3. What is the use of the @at-root directive in SASS?
   The @at-root directive is a collection of nested rules used to style a block at the document’s root.

Example:

h2 {    
	color: blue;    
	background: yellow;    
	@at-root {    
	.style {    
 	font-size: 10px;    
 	font-style: bold;    
 	color: red;    
  }    
 }    
}

Key Takeaways

This blog discussed mixin directives and how they ease the styling process by reusing those styles, with a few examples.

Mixin is a powerful SASS directive that can be used for reusing styles. We can also pass arguments to them, making it less complicated than other available options. We can create a mixin with a default value to avoid errors, and these default values can be overwritten by passing a value to the variable in the argument.

If you are a beginner and interested in learning about other fields such as core computer subjects, web development, or competitive programming. In that case, you can follow our guided path to get a good grip on your concepts.