Updated April 13, 2023
Introduction to SASS Mixins
HTML has made great progress in recent years towards becoming more semantic. Sass provides a different way, through the @mixin directive which is used specifically to offer non-semantic styling. Mixins enable you to determine styles that can be reused through your stylesheet. They facilitate the elimination of using non-semantic classes like.float-left and the distribution of style collections in libraries.
If a mixin is used, arguments that be passed by name as well as being passed by their position in the argument list. It is particularly useful for mixins with several optional arguments, or with boolean arguments whose definitions are not obvious without a name to follow.
Syntax 0f SASS mixins
The syntax for SASS mixins can be written as shown below:
@mixin <name of the mixin>
{
// code for styling the content
Property 1: value;
Property 2: value;
// till 'n' numbers of properties and values can be added
}
For instance:
@mixin mymixin {
color: red;
}
.myclass {
@include mymixin;
background-color: green;
}When you compile the above scss, you will have the following style code in the css as shown below:
.myclass {
color: red;
background-color: green;
}How do Mixins Work in SASS?
The mixin’s main purpose is to render a collection of properties reusable. Like Sass variables (in which we specify the values at a single location), we can specify properties at a single location using Sass mixins. The main work of the Mixin is to create reusable CSS blocks and helps us to avoid repetitive code writing.
Examples to Implement Mixins in SASS
Let’s create an example to make use of the mixins in SASS. Here, we have created an HTML file called example1.html with the below code:
Example #1
<!DOCTYPE html>
<html>
<head>
<title> SASS Mixins </title>
<link rel="stylesheet" type="text/css" href="sass_mixin1.css"/>
</head>
<body>
<h2> Welcome to EDUCBA... </h2>
<p class="class1"> It is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries.</p>
<p class="class2"> All our training programs are Job oriented skill based programs demanded by the Industry. </p>
</body>
</html>Now create a file called sass_mixin1.scss with the below code:
sass_mixin1.scss
@mixin my-mixin {
color:#2F4F4F;
}
.class1 {
@include my-mixin;
background-color: #F4A460;
}
.class2 {
@include my-mixin;
background-color: #FF69B4;
}Now open the command prompt and run the below command to watch the file and communicates it to SASS and updates the CSS file every time SASS file changes.
sass –watch sass_mixin1.scss: sass_mixin1.cssNow, execute the file with the above command and it will create the sass_mixin1.css file with the below code:
sass_mixin1.css
.class1 {
color: #2F4F4F;
background-color: #F4A460;
}
.class2 {
color: #2F4F4F;
background-color: #FF69B4;
}Output:
Now, execute the html file and open in the browser and you will get the below result:
Example #2
Create an HTML file called example2.html with the below code:
<html>
<head>
<title> SASS Nesting </title>
<link rel = "stylesheet" type = "text/css" href = "sass_mixin2.css" />
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class = "myheading">
<h2> Welcome to EDUCBA...!!! </h2>
<p> It is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. </p>
<p> All our training programs are Job oriented skill based programs demanded by the Industry. </p>
<div class = "myclass">
<h3> Why EDUCBA ?</h3>
<p> AteduCBA, it is a matter of pride for us to make job oriented hands-on courses available to anyone, any time and anywhere. Therefore we ensure that you can enroll 24 hours a day, seven days a week, 365 days a year. </p>
</div>
</div>
</body>
</html>Now create a file called sass_mixin2.scss with the below code:
sass_mixin2.scss
@mixin my-mixin {
color:#FA8072;
}
@mixin my-mixin1 {
color:#708090;
}
.myheading{
h2{
font-size: 20px;
@include my-mixin;
}
p {
font-size: 20px;
@include my-mixin1;
}
.myclass{
h3{
font-size: 20px;
@include my-mixin;
}
P{
font-size: 20px;
@include my-mixin1;
}
}
}Execute the file with the above command shown in the previous example and it will create the sass_mixin2.css file with the below code:
sass_mixin2.css
.myheading h2 {
font-size: 20px;
color: #FA8072;
}
.myheading p {
font-size: 20px;
color: #708090;
}
.myheading .myclass h3 {
font-size: 20px;
color: #FA8072;
}
.myheading .myclass p {
font-size: 20px;
color: #708090;
}Output:
Now, run the html file and open in the browser and you will get the below result:
Example #3
Create an HTML file called example3.html with the below code:
<html>
<head>
<title> SASS Nesting </title>
<link rel = "stylesheet" type = "text/css" href = "sass_mixin3.css" />
<body>
<h2> Welcome to EDUCBA...!!! </h2>
<p> It is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. </p>
<h3> Why EDUCBA ?</h3>
<p> AteduCBA, it is a matter of pride for us to make job oriented hands-on courses available to anyone, any time and anywhere. Therefore, we ensure that you can enroll 24 hours a day, seven days a week, 365 days a year. </p>
</body>
</html>Now create a file called sass_mixin3.scss with the below code:
sass_mixin3.scss
@mixin myheading($color, $width) {
border: $width dotted $color;
}
h2 {
@include myheading(lightcoral, 3px); // calling mixin with two values
}
h3 {
@include myheading(greenyellow, 3px); // calling mixin with two values
}Execute the file with the above command shown in the previous example and it will create the sass_mixin3.css file with the below code:
sass_mixin3.css
h2 {
border: 3px dotted lightcoral;
}
h3 {
border: 3px dotted greenyellow;
}Output:
Now, run the html file and open in the browser and you will get the below result:
Conclusion
So far, we have studied about mixins in SASS which are incredible in the HTML page. The SASS mixins improves productivity and makes the CSS tasks very easily. Apparently, mixins are really useful and accelerate the workflow. Mixin is a block of code that enables us to combine CSS declarations which we can reuse everywhere on the website.
Recommended Articles
This is a guide to SASS Mixins. Here we also discuss the definition and how do mixins work in sass? along with different examples and its code implementation. you may also have a look at the following articles to learn more –
