Yogesh Chauhan's Blog

Dynamically generate names in SCSS (animation example)

in SCSS on April 23, 2021

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:


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Can Firewall and IDPS Stop DDoS Attack?MiscellaneousWhat is XP (Extreme Programming) and When should it be used?MiscellaneousOrder By and Group By in PostgresPostgresLearn to create your skill bar using CSSCSSthe box-sizing property in CSSCSSHow to add a ribbon inside a container using CSS?CSSHow to apply style to a specific child element using CSS?CSSHow to add before after image effect using pure CSS?CSSHow to add multiple Columns in CSS like Bootstrap?CSSHow to change the style for checked radio button or checkboxes using CSS?CSSResponsive Masonry Grid using CSS columns PropertyCSS6 Different Functions to Sort Arrays in PHPPHP