YogeshChauhan . com

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:

dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

How to animate list items using CSS and JavaScript?CSSHow to create a smooth scrolling effect with CSS?CSSStyling Lists with CSSCSSEverything you need to know about ANY, SOME and ALL Operators in PostgresPostgresWhat does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?MiscMicroservices vs Monolithic ArchitectureMiscLearn to create your skill bar using CSSCSSHow to get current timestamp in Swift 4 and 5?SwiftSolution to “Call to undefined function mysql_error()” in RevSlider WordPress PluginWordPressSolution for the error Commit failed – exit code 1 received in Desktop GithubMiscDifferent Types of Functions in JavaScriptJavaScriptThe difference between Class declarations and Class expressions in JavaScriptJavaScript