dots Created with Sketch.
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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
How to center an image horizontally and vertically?CSSHow to add CurrencyPipe in TypeScript file in Angular 9 Project?AngularFull and Partial CUBE in Postgres with ExamplesPostgresLearn how to add Scroll Indicator using CSS and JavaScript?CSSCreate a currency (dollar) to coins convertor in ReactReact:in-range and :out-of-range selector in CSSCSS5 Steps to Create a Line using Canvas Tag in HTML5HTMLThe order Property in Flex Items in CSSCSSHow to import a CSS file using PHP code and not HTML code?PHPHow to Draw a Text Image using JavaScript?JavaScriptHow to Write Complex Search Queries in SQL?SQL/MySQLHow to check if the page is single post page in WordPress?WordPress