使用SASS生成具有动态宽度的列类

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