Mixins in Sass/SCSS are a powerful tool that helps us write clean, reusable and easy-to-maintain CSS. Mixins are blocks of code that you define once and can then reuse anywhere in your code.
If you do not know Sass/SCSS yet and have never used it, it is a CSS preprocessor that adds features such as variables, nesting and functions to the language. Mixins are one of the key features of Sass/SCSS and let you create reusable fragments of code that can be inserted into your style sheets.
In this article we take a closer look at mixins in Sass/SCSS and see how they can help you write better CSS.
Why use mixins?
There are many reasons why you might want to use mixins in your CSS. Here are some of the most important benefits:
Reusability: one of the main advantages of mixins is that they let you define a block of code once and then reuse it many times in your code. This can save a lot of time and effort, because you do not have to keep rewriting the same code.
Consistency: mixins can help keep your code consistent by ensuring that the same styles and rules are applied across the whole website or web application. This can be especially useful when working on a large project in a big team, or even on your own.
Readability: mixins can make your code more readable by encapsulating complex styles and rules in a single, easy-to-understand block of code. This helps avoid repetition and makes the code more concise and easier to maintain.
Defining mixins
To define a mixin in Sass, we use the @mixin directive followed by any name. Here is an example:
@mixin btn {
background-color: black;
color: white;
padding: 10px;
border: 2px solid #fff;
border-radius: 5px;
}
In this example we defined a mixin called “btn”, which sets a few basic styles for any element; in this case the name itself suggests using it for a button. We can then use this mixin anywhere in our code by including it in our CSS.
Using mixins
To use a mixin in Sass code, use the @include directive followed by the name of the mixin. Here is an example:
.btn {
@include btn;
}
In this example we created a CSS class called “.btn” and used the @include directive to insert the “btn” mixin into our code. This applies the styles defined in the mixin to that class.
Passing arguments to mixins
Mixins become even more powerful when you start using arguments to customise their behaviour. To define an argument for a mixin, use brackets after the mixin name and define the names of the attributes that will later be assigned values, as below:
@mixin button($txtColor, $bgColor) {
background-color: $bgColor;
color: $txtColor;
padding: 10px;
border: 2px solid $bgColor;
border-radius: 5px;
}
In this example we added two arguments to our “btn” mixin: $bgColor and $txtColor. We can then use these arguments to customise the background colour and text colour of our button.
To pass values to these arguments when using the mixin, you simply put them in the @include directive, as below:
.btn {
@include btn (#666, #d6d6d6);
}
In this example we passed the hex colour values “#666” and “#d6d6d6” to the $bgColor and $txtColor arguments of our mixin. This creates a button with a dark grey background and light grey text.
In summary
Mixins in Sass/SCSS are an essential tool for every developer who wants to write efficient and flexible CSS. With mixins we can create reusable blocks of code that are easy to modify and use anywhere in the code. By using mixins, you can save time and effort, keep your code consistent and readable, and create more modular, easier-to-maintain style sheets. So if you have not done so yet, consider using mixins in your code and see the benefits for yourself.
