Sass Mixins
Sass Mixins facilitates you to make groups of CSS declarations that you want to reuse repeatedly on your site. You can even pass the value according to your need to make the mixin more flexible.
The mixin can store multiple values or parameters and call function to avoid writing repetitive codes. Mixin names can use underscores and hyphens interchangeably.
Let’s take an example for border-radius. This example specifies how to use mixin in border-radius to use it repeatedly in your website.
SCSS Syntax:
Equivalent Sass Syntax:
Here, we use the mixin directive and give it a name border-radius. A variable $radius is used inside the parentheses to pass a radius according to or need. After creating the mixin you can use it as a CSS declaration. It starts with @include followed by the name of the mixin. The generated CSS will look like this:
CSS Syntax:
Directives present in Mixin
A list of directives present in Mixin:
| Index | Directive | Description |
|---|---|---|
| 1. | Defining a mixin | The @mixin directive is used to define the mixin. |
| 2. | Including a mixin | The @include directive is used to include the mixins in the document. |
| 3. | Arguments | Argments are the SassScript values that can be taken in mixins at the time when mixin is included and available as variable . |
| 4. | Passing content blocks to a mixin | It specifies block of styles passed to the mixin. |