Hi, are you looking for the answer of what is the use of mixin in scss? If yes then in this tutorial I will explain about mixin in SCSS – SASS. Using this technique we can save a lot of time while writing CSS for our project.

Using mixin you can make groups of CSS declarations that you think you will need to reuse them in your project.

I will give you an example for better understanding. So focus on what I am trying to explain to you.

Understand mixin in SCSS

Let’s say we have to create more than 1 box with rounded corners (border-radius). So here we can use a mixin in SCSS to save time. We will write SCSS only one time like the given example and then we can use it with any other class using the @include method of SCSS. It means you don’t need to write the CSS again for border-radius.

Example 1 (SCSS):

/*Creating our mixin to add 10px border radius to any class, id or tag*/
@mixin radius10() {
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
}
/*Now using the mixin like this*/
.box1 {
   @include radius10;
   width:100px;
   height:100px;
   border: 1px solid black;
}

In the above example first, we have created a mixin with the name “radius10” (you can give it any name as you want) and then we have used it on a class “box1” using @include method.

In case you need to create more than 1 box with different sizes of rounded corners (border-radius) then you will write SCSS like this.

Example 2 (SCSS):

/*Creating our mixin to add any number of border radius to any class, id or tag*/
@mixin radius($value) {
   border-radius: $value;
   -webkit-border-radius: $value;
   -moz-border-radius: $value;
}
/*Now using the mixin like this*/
.box1 {
@include radius(10px);
   width:100px;
   height:100px;
   border: 1px solid black;
}
/*Applying border radius with different sizes*/
.box2 {
   @include radius(20px);
   width:100px;
   height:100px;
   border: 1px solid black;
}

Above SCSS will write the following CSS for you.

.box1 {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

/*Applying border radius with different sizes*/
.box2 {
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

I hope this tutorial helped you.

Thanks for visiting ! Keep engaged for latest updates.