Register to Better Coder! It's free.
Enjoy the premium features and succeed at every job interview.

What is the advantage of using Sass mixins? When would you use them?

Experience Level: Junior
Tags: Sass


Mixins improve the code maintainability as they allow you to define a block of a code once and then use it multiple times, so that you don't need to duplicate it.

  • Use Mixins at places where you would be using same rule sets in multiple different selectors.
  • Use Mixins if you need to parametrize rule sets that are used in multiple different selectors.


@mixin alert($color, $bgColor) {
  border: solid 1px $color;
  color: $color;
  background-color: $bgColor;

.alert-success {
  @include alert(green, whitesmoke)

.alert-error {
  @include alert(red, yellow)

The Sass from above will be compiled to the following CSS:

.alert-success {
  border: solid 1px green;
  color: green;
  background-color: whitesmoke;

.alert-error {
  border: solid 1px red;
  color: red;
  background-color: yellow;


No Comments Yet.
Be the first to tell us what you think.
Sass for beginners
Sass for beginners

Are you learning Sass ? Try our test we designed to help you progress faster.

Test yourself