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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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
Create a simple bar chart and column chart using pure CSS gridCSSA Step by Step Guide to Make RSS in XML For Any Website or Blog For FreeMiscellaneousHow to change style of all direct children of an element using jQuery?jQueryThe SQL EXISTS OperatorSQL/MySQLShort-Circuit Evaluation in JavaScriptJavaScriptThe difference between 400(4xx) and 500(5xx) errorsMiscellaneousWordPress: How to display fields from ACF Flexible Contents?WordPressWhat does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?MiscellaneousHow to redirect or load a new document using JavaScript?JavaScriptThe SQL UNION OperatorSQL/MySQLHow to get the height and width of an element using JavaScript?JavaScriptHow to add MySQL alternate port and sockets/pipes in WordPress?WordPress