How to define a mixin in css?

Mixins in CSS is used to define patterns of property-value pairs that can be reused. It is used by the document authors to group vendor prefixes and to simplify the code.

To define a mixin, the @mixin keyword should be followed by the mixin name with a declaration block.

//example of mixin definition
@mixin .rounded7px {
  -moz-border-radius: 7px;
}