Sass - Mixin Directives



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.

Advertisements