CSS what is mixin?

CSS what is mixin?

Mixins allow document authors to define patterns of property value pairs, which can then be reused in other rulesets. The mixin name is a class selector that identifies the mixin being declared. The @mixin keyword must be followed by the mixin name and a declaration block.

The following lines define a mixin clearfix, and give it three property-value pairs:

@mixin .clearfix {
  overflow: hidden;
  _overflow: visible;
  zoom: 1;
}
Document authors may use mixins to group vendor prefixes and simplify their code during the time it takes for vendors to stabilize their implementations.

The following example groups various vendor prefixes for border-radius:

@mixin .rounded7px {
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
}


When you find yourself writing the same code over and over again, it feels like Sass mixins might help you out.
Sass mixins are CSS functions that you can include whenever you want.

@mixin overlay() {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

The name of this mixin is overlay. You can reference this mixin in any CSS rule by using @include:

.modal-background{
  @include overlay();
  background: black;
  opacity: 0.9;
}

As usual, this .scss will be compiled into .css:

.modal-background{
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  background: black;
  opacity: 0.9;
}




References:
http://oocss.org/spec/css-mixins.html