Sass - Mixin Directives

Advertisements

Previous Page
Next Page  

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