We just learned about interpolation and @mixin and @include rules in SCSS. Let’s make use of those concepts and create an animation.
Step 1: HTML
Just add this basic HTML in your project. Other styles is just part of a setup. You don’t need that.
Step 2: Create @mixin rule
Let’s create a @mixin rule that will accept one argument – duration. Animation name will be created dynamically using unique-id() function.
As you can see in the SCSS code above, we are creating the name dynamically and using that name in @keyframe rule. We’ll add content inside the @keyframe rule in step 3. Also, we are defining other properties as well.
Step 3: Include @mixin rules using @include
Once everything is set, all we need to do is just add the @mixin rules to the element using @include. Also, we’ll add the contents for @keyframe rule.
Here’s the final code and working demo:
