Quick answer: Mixins in SASS are reusable blocks of CSS you can include anywhere in your stylesheet, optionally with arguments and default values. Define one with the mixin keyword, then place it with the include statement and SASS pastes the rules in there. They are a go to tool for repeated declarations and for vendor prefixes.
Learn Mixins in SASS and reutilize style
Mixins permit you to characterize styles that can be re-utilized all through your stylesheet. They make it simple to try not to utilize non-semantic classes like .float-left and to disperse assortments of libraries’ styles.
Mixins are characterized utilizing the @mixin at-rule, which is composed @mixin <name> { … } or @mixin name(<arguments…>) { … }
Following is a simple example of using mixing to define content to centre.
@mixin flexCenter{
display: flex;
justify-content: center;
align-items: center;
}Now just using @include to call the mixin will copy the entire style. The beauty is that it can be called n number of times inside the SCSS file.
.main {
@include flexCenter;
}The SCSS compiles to the following CSS
.main {
display: flex;
justify-content: center;
align-items: center;
}
Here’s another classic example using arguments inside mixins to define the flex-direction.
@mixin flexCenter($direction) {
flex-direction: $direction
}To call the mixin with the argument, follow the example.
.main{
@include flexCenter(column);
}The column parameter defined inside flexCenter mixin will specify the flex-direction to the column, and the following is equivalent CSS
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column
}Learn to implement
Frequently asked questions
What is a mixin and how do I use it?
A mixin is a reusable block of CSS you define with the mixin keyword and place with the include statement wherever needed.
Can mixins take arguments and defaults?
Yes. Declare parameters with defaults, like mixin pad value with padding value, and call it with include pad 1rem.
What are mixins commonly used for?
They reduce repetition, apply vendor prefixes automatically, and create small layout or breakpoint helpers used across a project.