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:
{ width: 5px }
{ width: 10px } 
{ width: 15px } 
{ margin-top: 5px; }
{ margin-top: 10px; }
{ margin-top: 15px; }
{ font-size: 32pt; }
{ font-size: 28pt; } 
{ 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} {
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 😊 !!


    Blogger Comment
    Facebook Comment


Post a Comment