Sass increment class in variable - css

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

Answer 1

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});