Open In App

What is a Mixin and how to use it in SASS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to explain and see the usage of Mixin. Mixin is used in Sass, which is a CSS preprocessor. Mixin works as a function in Sass and helps us to reduce the writing same code over and over.

Syntax

@mixin <name>(<parameter>){
    // Code...
}

name: We have to provide the name of our mixin so that we can use it later in the other classes. 

parameter: Here parameter is optional, but if we have to use, we will have a variable with $ sign Ex; $value.

Now let’s understand how we can use mixin in our projects. So first we have to understand that mixin is an exclusive component of SASS, and we will use it in a separate file and then include it in our HTML page. So in the given examples below, we will use the compiled Sass.

Let’s consider a scenario where we have multiples div, and we have to alter some properties like border-radius, background-colour, etc. then we have to write the same code over and over for each class. Here we can use the mixin and use the mixin in each class where we need to change the CSS properties. We have to take care of one more thing while using mixin, when we have to use the mixin then we have to use a keyword @include then the name of the mixin and pass the required parameter.

Sass Code

// Use of mixin
@mixin bg-color($color) {
   background-color: $color;
}

.div1 {
   width: 100px;
   height: 100px;
   @include bg-color(red); // mixin call
}
.div2 {
   width: 100px;
   height: 100px;
   @include bg-color(green); // mixin call
}

Compiles CSS code of the above Sass code

.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: green;
}

The SASS code written above is the actual method of creating mixing. Now in the example, we will use the compiled SASS code which will appear in normal CSS.

Example 1: In this example, we will use compiled CSS file.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Mixins</title>
</head>
<style>
    .div1 {
        width: 150px;
        height: 50px;
        background-color: red;
        text-align: center;
    }
  
    .div2 {
        width: 150px;
        height: 50px;
        background-color: green;
        text-align: center;
    }
</style>
  
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <div class="div1">
        <p>GeeksforGeeks</p>
    </div>
    <div class="div2">
        <p>GeeksforGeeks</p>
    </div>
</body>
  
</html>


Output:

 

We can use the mixin in another way in which we will initially give the value to the properties and then use it in other classes. Note that we can have as many mixins as we want.

Sass code

// use of mixin
@mixin bg-color($color) {
  background-color: $color;
}

@mixin border-radius($radius) {
    border-radius: 10px;
  }

.div1{
    width: 100px;
    height: 100px;
    @include bg-color(red); // mixin call
    @include border-radius(10px); // mixin call
}
.div2{
    width: 100px;
    height: 100px;
    @include bg-color(green); // mixin call
    @include border-radius(10px); // mixin call
}

Compiles CSS code of the above Sass code

.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 10px;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 10px;
}

Example 2: In this example, we have initially given the value of border-radius 10px at the time of creating the mixin, and then we have used it in the div classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        .div1 {
            width: 150px;
            height: 50px;
            background-color: red;
            border-radius: 5px;
            text-align: center;
        }
  
        .div2 {
            width: 150px;
            height: 50px;
            background-color: green;
            border-radius: 5px;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
      
    <div class="div1">
        <p>GeeksforGeeks</p>
    </div>
      
    <div class="div2">
        <p>GeeksforGeeks</p>
    </div>
</body>
  
</html>


Output:

 

So, this was a basic overview of how we can use the mixin in our projects to make our tasks easier for larger projects, we can also use multiples properties at once in the mixin and use it afterwards.



Last Updated : 18 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads