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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
JavaScript: Methods for HTML DOM classList PropertyJavaScriptHow to make a Custom Login Page in WordPress?WordPressWill SQL (Relational) Database become obsolete?SQL/MySQLHow to Check If a Variable is an Integer, a Float, a Number, NaN, an Infinite or a Numeric in PHP?PHPHow to Skip or Exclude a Specific URL or File From .htaccess Rewrite Rule?PHPThe actual difference between indexOf() and search() in JavaScriptJavaScriptSQL Inner JoinSQL/MySQLHow to merge arrays in JavaScript?JavaScriptArguments in @mixin rules in SCSS (Sass)SCSSA few HTML coding standards from WordPressHTMLHow to use GROUPING SETS to boost GROUP BY queries in Postgres?PostgresHow to Make a Simple Module with a Form and Menu Link in Drupal 7.x?Drupal