Mixins in SASS

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