Share
Mixins are used to store a certain set of reusable CSS rules. They are quite similar to the functions that exist in many languages like C++, Python, etc.
Remember: Mixins are only available in the latest versions of CSS, i.e., SASS/SCSS
Let’s see a simple example below:
In the example below, we have made the clr
mixin, which assigns a green color.
Remember: we can call the mixin by using the
@include
syntax.
We can pass arguments to a mixin using the $
symbol. In the example below, we have passed $x
as an argument to the clr()
mixin. Now, clr()
will change the color of <p>
tag to the color specified in $x
which, in our case, is orange.
We have also set the default value of
$x
to green.