How to make an automatic grid for exact measurements using SCSS?

Question

I have the following example but in percentage:

$grid__cols: 12;
@for $i from 1 through $grid__cols {
  .col-#{$i} {
    flex-basis: (100 / ($grid__cols / $i) ) * 1%;
  }
}

That may be tested here, to generate the CSS automatically.

How could I apply the same rule in pixel only respecting the 12 columns with the exact mediated grid of 76.7px / 12px up to a total width 1272px?

Grid example:

Answer 1

This formula will make the progression of the columns in PX until 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;
}

---

And that formula will create 12 colunas of 76.7px, which makes no sense at all, because you would want a class with col-12, but which has the same px width as col-6 The.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;
}