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:

.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

@for $value from 1 through 700 {

    .w-#{$value} {
      width:#{$value}px
    }
  }

it will generate the classes as below

.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