Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

basics
sass
styling

Mixins in SASS

Educative Answers Team

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:

svg viewer

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.

Arguments in a mixin

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.

RELATED TAGS

basics
sass
styling
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring