Mixins in Sass
What are mixins and how do you use them in Sass? Let’s take a look and use some examples so you can follow along.
Sass stands for Syntactically Awesome Style Sheets, and it’s an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organized and allows you to create style sheets faster. It is self-proclaimed as the most mature, stable and powerful professional-grade CSS extension language out there. It is basically CSS on steroids. A close analogy would be that Sass is to CSS what TypeScript is to JavaScript.
What You Will Learn
This article is an introduction to the use of mixins in Sass and why they are important. It will cover the syntax and how the parameters are built, all with clearly defined examples that you can follow for yourself. (In case you're interested, I also wrote a related post introducing mixins in TypeScript.)
Prerequisites
To follow through properly and learn from this article, you will need to have the following things ready on your computer:
- An integrated development environment (IDE). I recommend Visual Studio Code because that is what I will use throughout the course of this post.
- Open your VS Code and click the extension tab.
- Search for and install Live Sass compiler. It currently has over 600k downloads at the time of this writing. After installing it, you should see a “Watch Sass” button at the footer of your VS Code.
- Also download the live server extension.
- Create a new folder in a location of your choice and then open it up in your IDE.
This article is written for all developers at any level of knowledge, including beginners.
Mixins in Sass
Mixins in Sass are a feature that allows you to reuse styles across template rules. They were made to clear up the path of avoidance of using classes that are not semantic, like float. HTML has made considerable changes in the direction of being more semantic with tags like section and aside and even articles enforcing a focus on meaning rather than layout. CSS has not yet gotten to that level of being totally semantic, and that is where Sass comes in with mixins.
Setting up Sass
If you followed the prerequisites, then open the new folder you created in VS Code and create a new file. Call it index.html, where our presentation code will reside. Copy the code below inside the HTML file.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Test Page</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div class="container">
<h1>Test Page</h1>
<p>This page just tests out Mixins in
Sass with a cool example</p>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</body>
</html>
For now there is no stylesheet linked to this presentation. Create a new folder called styles, and create a new file inside it called styles.scss and copy the rules below into it:
body{
background-color: gainsboro;
}
.container{
margin: 30px;
}
.content{
height: 100px;
width: 140px;
background: indianred;
display: inline-block;
}
Because HTML does not understand SCSS, it has to be compiled to CSS, and that is why we have installed the live compiler extension in VS Code so we do not have to any heavy lifting. If you click the “Watch Sass" button, you will see that it compiles and generates a new file called styles.css. Now you can link the CSS to your HTML and let it look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Test Page</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='/styles/styles.css'>
</head>
<body>
<div class="container">
<h1>Test Page</h1>
<p>This page just tests out Mixins in
Sass with a cool example</p>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</body>
</html>
This is an example use case, but imagine this HTML page was a big single-page application and these six divs had individual classes of their own but you still wanted them to share some styles among each other. You can achieve that in CSS in two ways. The first way is to replicate the styles. To show this, change the six divs in your HTML to the ones below:
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
<div class="content4"></div>
<div class="content5"></div>
<div class="content6"></div>
To apply the same rules to different classes, change the style.scss file to look like this:
body{
background-color: gainsboro;
}
.container{
margin: 30px;
}
.content1{
height: 100px;
width: 140px;
background: indianred;
display: inline-block;
}
.content2{
height: 100px;
width: 140px;
background: indianred;
display: inline-block;
}
.content3{
height: 100px;
width: 140px;
background: indianred;
display: inline-block;
}
.content4{
height: 100px;
width: 140px;
background: indianred;
display: inline-block;
}
.content5{
height: 100px;
width: 140px;
background: indianred;
display: inline-block;
}
.content6{
height: 100px;
width: 140px;
background: indianred;
display: inline-block;
}
If you click the “Go Live” button on the footer of VS Code, a remote server will host the HTML file in your browser, and the result will look like this:
The Problem
The problem with this method is that when you look at the rules, you can see that the same block of code is being repeated several times. That is inefficient and one of the reasons why mixins exist in Sass. Mixins allow you to define styles in one place and then easily reuse those styles.
The mixin syntax is usually like this:
@mixin <name>
{
<rules>
}
Where name is the mixin name and rules are definition of CSS rules to be reused. After defining a mixin, you use the keyword includes like this to apply it:
<selector>
{
@include <name>;
}
So applying this to our use case above, your styles.scss file will now look like this:
body{
background-color: gainsboro;
}
.container{
margin: 30px;
}
@mixin content{
height: 100px;
width: 140px;
background: indianred;
display: inline-block;
}
.content1{
@include content();
}
.content2{
@include content();
}
.content3{
@include content();
}
.content4{
@include content();
}
.content5{
@include content();
}
.content6{
@include content();
}
If you take a look at your browser, you will see that the this gives same output as the first method. The difference is that with mixins, you can reuse rules easily and not repeat yourself, thereby adhering to the DRY principle and being efficient.
Conclusion
This has been a quick overview of mixins in Sass, why they are important, their syntax and how they can be used in your workflow moving forward. This also highlights efficiency advantages that comes with mixins. Happy hacking.
Nwose Lotanna Victor
Nwose Lotanna Victor is a web technology enthusiast who documents his learning process with technical articles and tutorials. He is a freelance frontend web developer based in Lagos, Nigeria. Passionate about inclusion, community-building and movies in Africa, he enjoys learning new things and traveling.
Related Posts
Comments
All articles
Topics
Latest Stories
in Your Inbox
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required