**Mixins** are used to store a certain set of reusable CSS rules. They are quite similar to the **functions** that exist in many languages like C++, Python, etc.
>Remember: Mixins are only available in the latest versions of **CSS**, i.e., **SASS/SCSS**

Let's see a simple example below:

In the example below, we have made the `clr` mixin, which assigns a green color.

> Remember: we can call the mixin by using the `@include` syntax.

@mixin clr {
   color: green; 
}
div {
    color: red ;
    p {
        @include clr();
    }
}

<html>
 <head>
 </head>
 <body>
   <div>
     Educative
     <p>Welcome to Educative!</p>
   </div>
 </body>
</html>

codemirror

# Arguments in a mixin

We can pass arguments to a mixin using the `$` symbol. In the example below, we have passed `$x` as an argument to the `clr()` mixin. Now, `clr()` will change the color of `<p>` tag to the color specified in `$x` which, in our case, is orange.  

> We have also set the default value of `$x` to green.

@mixin clr ($x:green) {
   color: $x; 
}
div {
    color: red ;
    p {
        @include clr(orange);
    }
}

# Arguments in a mixin

We can pass arguments to a mixin using the `＄` symbol. In the example below, we have passed `＄x` as an argument to the `clr()` mixin. Now, `clr()` will change the color of `<p>` tag to the color specified in `＄x` which, in our case, is orange.  

> We have also set the default value of `＄x` to green.

Mixins in SASS

Mixins in SASS store reusable CSS rules similar to functions. Use @include and pass arguments with $.