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.
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:
Directives present in Mixin
A list of directives present in Mixin: