Why does flex-basis calculation return an error in SASS?

Question

So I was quickly typing out a flex-grid generator in scss as I often do, but for some weird reason this returns an error now. From my assumption this is totally correct and should simply compile to the desired classes. I'm using a 12-col-grid system, this is my approach flex: 0 0 #{100 / 12 / $i}%;, I propably miss something really obvious. My Codepen.


@mixin colSpan {
  @for $i from 1 through 12 {
    .col-#{$i} {
      flex: 0 0 #{100 / 12 / $i}%;
      max-width: #{100 / 12 / $i}%;
    }
  }
}

@include colSpan;

Temani Afif · Answer

add the % to the 100

@mixin colSpan {
  @for $i from 1 through 12 {
    .col-#{$i} {
      flex: 0 0 #{100% / 12 / $i};
      max-width: #{100% / 12 / $i};
    }
  }
}

@include colSpan;

Why does flex-basis calculation return an error in SASS?

One Answer

Add your own answers!

Ask a Question