Generate Dynamic CSS Classes for common properties using SCSS

While writing the CSS, for using basic & common classes for layout (for width), typography, alignment etc, we write css c like:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.w-5 { width: 5px } .w-10 { width: 10px } .w-15 { width: 15px } .margin-top-5 { margin-top: 5px; } .margin-top-10 { margin-top: 10px; } .margin-top-15 { margin-top: 15px; } .fs-31 { font-size: 32pt; } .fs-28 { font-size: 28pt; } .fs-24 { font-size: 24pt;}

Creating all the classes takes lot of time. But using SCSS we can simply create the classes dynamically with the following simple syntax

?

1 2 3 4 5 6

@for $value from 1 through 700 {       .w-#{$value} {       width:#{$value}px     }   }

it will generate the classes as below

?

1 2 3 4 5

.w-1{ width: 1px} .w-2{ width: 2px} .w-3{ width: 3px} ... .w-700{ width: 700px}

we can apply the same syntax for remaining too (font-size, margin etc).

Happy Coding 😊 !!

Gopikrishna