SASS Mixin

SASS mixin is similar inline function these mixin contains rule or set of rules that can be include using @include directive. Where we include mixin the rules inside mixin are automatically added in that place.

Mixin Syntax:

@mixin highlight {
font-size : 14px;
font-weight: bold;
}

.header {
@include highlight();
line-height : 1.333356;
background-color : gray;
}

Compiled CSS:

The compiled CSS will include entire rules of mixin in place of @include directive similar to inline function.

.header {
font-size : 14px;
font-weight: bold;
line-height : 1.333356;
background-color : gray;
}

@mixin Parameters:

In SASS mixin can also accept parameters in form of variables. These parameters are passed to mxin in @include directive. Parameters works in similar way as in formal functions. These parameters can be assigned to various rules.