Essa fórmula vai fazer a progressão das colunas em PX
até 1272px
$grid__cols: 12;
@for $i from 1 through $grid__cols {
.col-#{$i} {
flex-basis: (1272 / ($grid__cols / $i) ) * 1px;
}
}
OUTPUT
.col-1 {
flex-basis: 106px;
}
.col-2 {
flex-basis: 212px;
}
.col-3 {
flex-basis: 318px;
}
.col-4 {
flex-basis: 424px;
}
.col-5 {
flex-basis: 530px;
}
.col-6 {
flex-basis: 636px;
}
.col-7 {
flex-basis: 742px;
}
.col-8 {
flex-basis: 848px;
}
.col-9 {
flex-basis: 954px;
}
.col-10 {
flex-basis: 1060px;
}
.col-11 {
flex-basis: 1166px;
}
.col-12 {
flex-basis: 1272px;
}
E essa formula vai criar 12 colunas
de 76.7px
, o que não faze sentido algum, pq vc iria querer uma classe com col-12
, mas que tem a mesma largura em px da col-6
O.o
$grid__cols: 12;
@for $i from 1 through $grid__cols {
.col-#{$i} {
flex-basis: 76.7px;
}
}
OUTPUT
.col-1 {
flex-basis: 76.7px;
}
.col-2 {
flex-basis: 76.7px;
}
.col-3 {
flex-basis: 76.7px;
}
.col-4 {
flex-basis: 76.7px;
}
.col-5 {
flex-basis: 76.7px;
}
.col-6 {
flex-basis: 76.7px;
}
.col-7 {
flex-basis: 76.7px;
}
.col-8 {
flex-basis: 76.7px;
}
.col-9 {
flex-basis: 76.7px;
}
.col-10 {
flex-basis: 76.7px;
}
.col-11 {
flex-basis: 76.7px;
}
.col-12 {
flex-basis: 76.7px;
}