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.

Comments
Login to TRACK of Comments.