Sass increment class in variable

Question

Helo i just learning sass and trying to make dynamic class by looping. and my code just like this

$col-width-1: 1/12*100%;
$col-width-2: 2/12*100%;
$col-width-3: 3/12*100%;
$col-width-4: 4/12*100%;
$col-width-5: 5/12*100%;
$col-width-6: 6/12*100%;
$col-width-7: 7/12*100%;
$col-width-8: 8/12*100%;
$col-width-9: 9/12*100%;
$col-width-10: 10/12*100%;
$col-width-11: 11/12*100%;
$col-width-12: 12/12*100%;

.col-1{
    width: $col-width-1;
}
.col-2{
    width: $col-width-2;
}
.col-3{
    width: $col-width-3;
}
.col-4{
    width: $col-width-4;
}
.col-5{
    width: $col-width-5;
}
.col-6{
    width: $col-width-6;
}
.col-7{
    width: $col-width-7;
}
.col-8{
    width: $col-width-8;
}
.col-9{
    width: $col-width-9;
}
.col-10{
    width: $col-width-10;
}
.col-11{
    width: $col-width-11;
}
.col-12{
    width: $col-width-12;
}

$columns: 12;
$padding-mini: 10px;

 @for $i from 1 through $columns {
        .col-#{$i} {
            width: calc(#{$col-width-#{$i}} - #{$padding-mini});
        }
    }

is possible to make dynamic or increment variable inside the loop ? when i check the console. the error caused by this code:

width: calc(#{$col-width-#{$i}} - #{$padding-mini});

i have search on internet but i can't get any clear solutions. thanks for your answer

score 1 · Accepted Answer · answered Jan 13 '21 at 20:16

You can't reference variables dynamically with SASS. However, since all your variables use the same calculation you can simply put it directly in the loop:

$columns: 12;
$padding-mini: 10px;

@for $i from 1 through $columns {
   .col-#{$i} {
      width: calc(#{$i}/#{$columns}*100% - #{$padding-mini});
   }
}

You can also write it like this:

width: calc(#{$i/$columns}*100% - #{$padding-mini});

Sass increment class in variable

1 Answers1