Generating column classes with dynamic width using SASS - css

Question

I was trying to generate a dynamic grid system using SASS with variable widths using a #for loop. So far I have :
#for $value from 1 through 12 {
$width: percentage(1/$value);
.col-md-#{$value} {
width: $width;
}
}
The output for the above code would be:
.col-md-1 {
width: 100%;
}
.col-md-2 {
width: 50%;
}
.
.
.
.col-md-11 {
width: 9.09091%;
}
.col-md-12 {
width: 8.33333%;
}
Is there anyway this could be reversed by tinkering with the percentage functions in such a way that:
.col-md-12 {
width: 100%;
}
and
.col-md-1 {
width: 8.33333%;
}
The opposite of what I currently have. Thanks in advance.

Answer 1

A simple change to the math should do the trick:
#for $value from 1 through 12 {
$width: percentage($value/12);
.col-md-#{$value} {
width: $width;
}
}
results in:
.col-md-1 {
width: 8.33333%;
}
.col-md-2 {
width: 16.66667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333%;
}
.col-md-5 {
width: 41.66667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333%;
}
.col-md-8 {
width: 66.66667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333%;
}
.col-md-11 {
width: 91.66667%;
}
.col-md-12 {
width: 100%;
}