Sass loop для генерации динамических соотношений семантических классов

Question

Я пытаюсь написать цикл Sass, который создаст сетку с семантикой отношения.

Я начал с:

$columns:  12 !default; 

@mixin widths-setup($namespace: "") { 
    @for $i from 1 through $columns { 
     .width-#{$i} { 
      width: percentage($i/$columns); 
     } 
    } 
} 

, который производит:

.width-1 { width: 8.33333%; } 

.width-2 { width: 16.66667%; } 

... 

.width-12 { width: 100%; } 

То, что я хотел бы производить, предположительно, с использованием @if состояния является

.width-1-1 { width: 100%; } 

.width-1-2 { width: 50%; } 

.width-2-2 { width: 100%; } 

.width-1-3 { width: 33.3333%; } 

.width-2-3 { width: 66.66667%; } 

.width-3-3 { width: 100%; } 

... 

.width-1-12 { width: 8.3333%; } 

.width-2-12 { width: 16.6666%; } 

.width-3-12 { width: 25%; } 

... 

.width-12-12 { width: 100%; } 

Каждый класс начинается с ширины, второе число увеличивается на единицу во время каждого шага цикла, пока оно не станет равным {$ i}, а третье число - это увеличение {$ i}, которое остановится на число, присвоенное переменной $ columns. ,

Хотя будут ненужные классы (ширина-1-1, ширина-2-2, ширина-3-3 и т. Д.), Которые будут иметь одинаковую ширину, но это раздувание не касается меня в это время ,

Answer 1

$columns: 12 !default; 

@mixin widths-setup($namespace: "") { 
    @for $i from 1 through $columns { 
     $cols: $i; 
     @for $k from 1 through $cols { 
      .width-#{$k}-#{$i} { 
       width: percentage($k/$cols); 
      } 
     } 
    } 
} 

Это должно вывести ожидаемый (но все еще раздутый) результат.