Mixins allow creating a group of styles, which are reusable throughout your stylesheet without any need to recreation of non-semantic classes. In CSS, the mixins can store multiple values or parameters and call function; it helps to avoid writing repetitive codes. Mixin names can use underscores and hyphens interchangeably. Following are the directives present in Mixins −
S. No. | Directive & Description |
---|---|
1 | Defining a Mixin
@mixin directive is used to define the mixin. |
2 | Including a Mixin
@include directive is used to include the mixins in the document. |
3 | Arguments
The SassScript values can be taken as arguments in mixins, which is given when mixin is included and available as variable within the mixin. |
4 | Passing Content Blocks to a Mixin
Block of styles are passed to the mixin. |