SASS @mixin Rule - Argument Types for This SCSS Directive

1. What is @mixin Rule in SASS?

As we understand that we can define SASS functions and reuse them infinitely, similarly, we create reusable styles via the @minxin rule or directive, which can be utilized repeatedly in our SASS stylesheet. In this tutorial, we will discuss the syntax and usage principle of the SCSS @mixin rule. Also, we will examine the arguments that an SCSS @mixin directive grasps and the kinds of arguments. Further, we will analyze the content block and utilization of the @return rule in SASS stylesheets.

1.1. Syntax of SASS @mixin Rule

As we know, all the at-rules in SASS hold a proper syntax, which we need to follow. The SCSS @mixin rule similarly possesses a unique syntax to formulate reusable chunks of styles.

@mixin name-of-mixin(arguments...) {
	statements...;
}

@mixin name-of-mixin(arguments...)
	statements...

// CSS styles

• The above two code blocks display the syntax variants for both SCSS and SASS types implementations.
• The very first component is the directive @mixin.
• Next is the name, which can be any string or combination of numbers and strings.
• Also, the mixin names are flexible in SASS language as if we include a mixin by table-mix or table_mix, the SCSS engine will equally treat the hyphen - and underscore _, and hence points to the same mixin.
• Further, we include arguments declared for that mixin only, which will perform actions combined with statements.
• Moreover, the curly braces hold the statements, style rules, and style declarations to use in style rules or can have simply SASS variables.

1.2. Indented Mixin Syntax

In addition to the above standard syntax of the SASS @mixin rule for both SCSS and SASS types, there is another syntax category for SASS or indented implementation. There is a slight variation in defining and usage of the mixin in indented type syntax.

• We set up the mixin via equal = sign
• Also, it is incorporated using the plus + symbol
• However, this syntax is harder to understand
• Hence, it is discouraged to apply this indented syntax

=content-box
	margin: 0
	padding: 0
	font-size: 14px

.main-content
	+content-box

2. Usage of SCSS @mixin Directive

As the overhead syntax of @mixin depicts the components that a mixin declaration can hold. Let us make use of those components and formulate a mixin. Contemplate the below example in which we created two mixins to generate styling for the HTML table element. The SASS @include rule is implemented for calling the mixin at the desired place.

@mixin row-setting {
	height: 20px;
	text-align: center;
	a{
		text-decoration: none;
	}
}
@mixin cell-setting {
	@include row-setting;
	td {
		display: inline-block;
		border: 1px solid #ddd;
		box-sizing: border-box;
	}
}
table tr {
	@include cell-setting;
}

table tr {
	height: 20px;
	text-align: center;
}
table tr a {
	text-decoration: none;
}
table tr td {
	display: inline-block;
	border: 1px solid #ddd;
	box-sizing: border-box;
}

3. Arguments in SASS @mixin Directive

The SCSS @mixin rule also takes arguments to perform some operations based on argument value just like the @function and @at-rule directives.

• The SASS @mixin directive embraces arguments after the name of the mixin.
• An argument lay the behavior of the mixin and each new value of the argument outputs a unique result.
• Further, the arguments are specified as a list of SCSS variables after the name.
• Moreover, these variables are separated by commas.
• Also, we can have a single or infinite number of arguments.
• Importantly, after specifying the number of the arguments, we must call or include the mixin with that exact number of argument values.

The next example takes an argument $color for the mixin theme. It expects a color value and creates the CSS declarations according to the provided color.

@mixin theme($color){
	border: 5px solid $color;
	shadow: 0 0 5px 0 rgba($color, 0.5);
	color: $color;
	background: rgba($color, 0.2);
}
.main-wrapper{
	@include theme(#333);
}
.panel-welcome{
	@include theme(#2a73cc);
}
.panel-checkout{
	@include theme(#00ff00);
}

.main-wrapper {
	border: 5px solid #333;
	shadow: 0 0 5px 0 rgba(51, 51, 51, 0.5);
	color: #333;
	background: rgba(51, 51, 51, 0.2);
}
.panel-welcome {
	border: 5px solid #2a73cc;
	shadow: 0 0 5px 0 rgba(42, 115, 204, 0.5);
	color: #2a73cc;
	background: rgba(42, 115, 204, 0.2);
}
.panel-checkout {
	border: 5px solid #00ff00;
	shadow: 0 0 5px 0 rgba(0, 255, 0, 0.5);
	color: #00ff00;
	background: rgba(0, 255, 0, 0.2);
}

4. Types of Arguments in SASS @mixin Rule

Meanwhile, when we write a mixins in SASS, we can employ the four types of arguments for the @mixin directive. These four types are as follows.

1. Mandatory Arguments
2. Optional Arguments
3. Keyword Arguments
4. Arbitrary Arguments

Let us explore each of the above argument types with appropriate examples.

4.1. Mandatory Arguments

Normally, we define the @mixin directive with mandatory or compulsory SCSS arguments. In this type, we must provide the exact number of argument values when we include them using the @include at-rule. Hence, providing more or fewer values results in an error.

@mixin width( $image-width, $text-width ) {
	width: $image-width + $text_width;
}
.content-wrapper{
	@include width(500px, 300px);
}

.content-wrapper {
	width: 800px;
}

4.2. Optional Arguments

The optional kind of arguments in the SASS @mixin directive is those which are not important or essential. Therefore, unlike the mandatory type, it is not compulsory to include the mixin with an equal number of argument values. If we omit or exclude the value of the optional argument, there will be no error.

• An optional SASS @mixin argument is made by setting a default value of the argument while defining it.
• Further, if we do not pass a value while creating mixins, this default value will be inserted.
• Also, we define the default value for the argument just like setting the value for a SASS variable.
• Hence, the optional arguments make the SCSS @mixin directive very flexible.
• This value can be any SassScript expression or even refer to earlier arguments.

@mixin signup( $width, $color : #333 ) {
	width: $width;
	color: $color;
	background: rgba($color, 0.2);
}
.signup-wrapper{
	@include signup(400px);
}

.signup-wrapper {
	width: 400px;
	color: #333;
	background: rgba(51, 51, 51, 0.2);
}

4.3. Keyword Arguments

The keyword arguments are those which we pass as variables to the SCSS @mixin rule upon including.

• The keyword arguments in the SASS @mixin directive are defined similarly as in optional and mandatory argument types.
• Also, these types of keywords are helpful when there are multiple arguments.
• Importantly, the position of the argument must be according to the definition.
• The syntax is similar to previous argument types.

@mixin box($size, $radius:5px) {
	width: $size;
	height: $size;

	@if $size >= 200px {
		border-radius: $radius;
		border: $size/40;
	}
}
.panel {
	@include box(300px, $radius:10px);
}

.panel {
	width: 300px;
	height: 300px;
	border-radius: 10px;
	border: 7.5px;
}

4.4. Arbitrary Arguments

• The last argument type in SCSS @mixin rule is the arbitrary arguments.
• Usually, when we don't know the number of input or passed values as arguments to the mixins, we make use of the arbitrary arguments.
• Therefore, while defining an SCSS @mixin directive, if we add ... three dots after the last argument, it means that any arguments passed after that will be added as an arguments list.

Consider the below example to discern the arbitrary argument type in the SASS @mixin directive.

@mixin content($color, $args...) {
	@for $i from 0 to length($args) {
		#{nth($args, $i + 1)} {
			position: relative;
			background: rgba($color, 0.2);
			border: $i+px solid $color;
			color: $color;
		}
	}
}
.main-content{
	@include content(#333, ".panel-1", ".panel-2");
}

.main-content .panel-1 {
	position: relative;
	background: rgba(51, 51, 51, 0.2);
	border: 0px solid #333;
	color: #333;
}
.main-content .panel-2 {
	position: relative;
	background: rgba(51, 51, 51, 0.2);
	border: 1px solid #333;
	color: #333;
}

4.5. Arbitrary Arguments Implementation

The arbitrary type arguments in SCSS @mixin rule can have two implementations.

4.5.1. Arbitrary arguments as keywords

@include color-vals($text: #080, $heading: #333, $link: #00f);

4.5.2. Passing arbitrary arguments

@mixin formMixin($var, $args...){...}

$form-elems: "input.name", "input.address", "input.zip" !default;

@include formMixin(150px, $form-elems...);

5. Content Block in SCSS @mixin Rule

In addition to arguments, the SASS @mixin directive can have blocks of styles known as content block.

• We add the content block in the @mixin rule with the help of the SASS @content directive.
• Further, the passing of the content block is simple by placing the styles within the curly braces.
• Resultantly, the styles are inserted in the place of the content block.
• Moreover, there can be any number of @content blocks.
• The multiple content blocks in SCSS @mixin will be included separately.
• Also, the content blocks are lexically scoped and can only access the local variables.

Let us comprehend this content block concept with the help of the below instance.

@mixin theme($width) {
	@if $width >= 600px {
		@content;
	}
	@if $width >= 900px {
		@content;
	}
}

$width-1: 600px;
$width-2: 1000px;
.inner-section {
	@include theme($width-1) {
		width: $width-1;
		border-radius: 5px;
	}
}

.inner-section {
	width: 600px;
	border-radius: 5px;
}

6. SASS @include Rule

As we know from the above theory and examples that a mixin is defined initially before employing in our style rules. Then to use that mixin, we have to include it with the help of the SASS @include rule or directive. This @include directive is responsible for the execution of that mixin.

6.1. Syntax of SASS @include Directive

The syntax of the SCSS @include rule is quite simple.

@include mixin-name;

7. Conclusion

Finally, concluding the SASS @mixin rule, we have found out about the syntax types and implementation of this directive with examples. Also, we talked comprehensively about the arguments and their types which we incorporated within mixins. Moreover, we also talked about the content blocks and their usage. Furthermore, we also looked into the @include directive which is important to use the SCSS @mixin rule in our SASS stylesheets.