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