Reusable blocks using Sass @mixin with angular example

One of the biggest features of CSS Preprocessors like Sass is the resuable blocks in another meaning "@mixin"...
The very common use for using "mixins" is to store some css properties to be later included "@include" into another class and this is very useful already but one of rare usage of mixin is to act like a function which takes some arguments and act accordingly.

of course Sass has @function decorator as well but it is different than @mixin since function in sass should return a value and it is commonly used to do operations not to create css code.

so lets jump straight into an example of "@mixin"

use case:

For this example I'm using Angular with scss.However, this is still valid with any other framework or pure html/sass.

Imagine you have multiple status in your app and according to each status returned from http request, you need to change the color of text or background of certain UI block.

<div [ngClass]="status">Current Status<div>

We have 3 different status returned from the backend: active/freezed/cancelled

so with every status returned I want to apply this css code

.active {
  border: 5px solid green;
  box-shadow: 0 0 35px green;
}

.freezed {
  border: 5px solid blue;
  box-shadow: 0 0 35px blue;
}

.cancelled {
  border: 5px solid red;
  box-shadow: 0 0 35px red;
}

this might seem fine to you since it is not a lot of code but imagin that use need to add some kind of animation like so
animation: fadeInOut 2s infinite;
so the code should look like somthing similar

.active{
  border: 5px solid blue;
  box-shadow: 0 0 35px green;
  animation: fadeInOut-green2s infinite;
}
  @keyframes fadeInOut-green{

    0%,
    100% {
      box-shadow: 1px 0px 30px 4px green, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    }

    50% {
      box-shadow: 0px 0px 0px 0px rgba(255, 0, 0, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    }
  }
}
.freezed{
  border: 5px solid blue;
  box-shadow: 0 0 35px blue;
  animation: fadeInOut-blue 2s infinite;
}
  @keyframes fadeInOut-blue {

    0%,
    100% {
      box-shadow: 1px 0px 30px 4px blue, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    }

    50% {
      box-shadow: 0px 0px 0px 0px rgba(255, 0, 0, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    }
  }
}
.cancelled{
  border: 5px solid red;
  box-shadow: 0 0 35px red;
  animation: fadeInOut-red 2s infinite;
}
  @keyframes fadeInOut-red {

    0%,
    100% {
      box-shadow: 1px 0px 30px 4px red, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    }

    50% {
      box-shadow: 0px 0px 0px 0px rgba(255, 0, 0, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    }
  }
}

so these keyframes are changing the shadow of the element according to its color and in our case we will have to create 3 keyframes for the 3 statuses... suddenly you would feel there is something wrong if you didn't feel it already earlier.

here comes the power of Sass and mixin...

@mixin _fadeAnimation($ColorVar) {
  border: 5px solid $ColorVar;
  box-shadow: 0 0 35px $ColorVar;
  animation: fadeInOut-#{$ColorVar} 2s infinite;

  @keyframes fadeInOut-#{$ColorVar} {

    0%,
    100% {
      box-shadow: 1px 0px 30px 4px $ColorVar, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    }

    50% {
      box-shadow: 0px 0px 0px 0px rgba(255, 0, 0, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    }
  }
}

.active {
  @include _fadeAnimation(green);
}

.freezed {
  @include _fadeAnimation(blue);
}

.cancelled{
  @include _fadeAnimation(red);
}

I think that last piece of code is a please to see for most of developers since it is very close to what we use on daily basis on any programming language... mixin here is the function that takes some arguments and we excute that function using @include with function name with the desired parameters.