SASS @include Rule - SCSS Directive to Use @mixin

1. What is SASS @include Rule?

If we go through the SASS mixin chapter, we will get to know that the @include directive is too much worthy for SCSS @mixin rule. These mixins are useful to create beautiful chunks of ready-made styles and also reusable.

Also, the SCSS mixins decrease the length of the code as if we need similar declarations for different style rules, we don't have to write the code each time. We just create a mixin and incorporate it at the desired place with the help of the SASS @inlcude rule or directive.

1.1. SCSS @include Rule Syntax

It is much simple to write and employ a mixin with the help of the SCSS @include directive. See the below syntax to comprehend.

selector{
	@include mixin-name;
}

selector
	@include mixin-name

// Generated CSS styles

2. Usage of SASS @include Directive

Since the @include directive is responsible for the working of SCSS mixins, therefore, let us discern this concept with the help of the below elaborative instance.

@mixin image-box($image, $size: 200px) {
	width: $size;
	$heading: 50px;
	height: $size+$heading;
	padding: 20px;
	margin: 20px;

	background: {
		image: $image;
		repeat: no-repeat;
	}
	.heading{
		height: $heading;
		width: 100%;
		display: block;
		text-align: center;
		background: #333;
		color: #fff;
	}
}
.image-panel {
	@include image-box("/images/smily.png", 500px);
}

.image-panel {
	width: 500px;
	height: 550px;
	padding: 20px;
	margin: 20px;
	background-image: "/images/smiley.png";
	background-repeat: no-repeat;
}
.image-panel .heading {
	height: 50px;
	width: 100%;
	display: block;
	text-align: center;
	background: #333;
	color: #fff;
}

2.1. Explanation

• In the atop example, we formulated an SCSS mixin image-box using the @mixin directive
• After adding the desired style declarations and the SCSS style rules within that mixin, we added it under the .image-panel selector using the @include SASS directive
• This @include rule when called within the .image-panel selector, it automatically points to the defined SASS mixin
• Hence, resultantly it adds all the styles and style rules of that mixin within that selector