title: Media queries stop overwriting?
body: <h2>Solved</h2>
  <hr />
  <p>So - I have been building this grid-framework, when I stumbled upon an issue, which neither I had before nor I can find any evidence on online.</p>
  <hr />
  <p><strong>In short</strong>: when I have multiple <code>@media queries</code> arranged like this:</p>
  <pre><code>@media (min-width: 400px) {...}
  @media (min-width: 600px) {...}
  @media (min-width: 840px) {...}
  </code></pre>
  <p>I expect each one to overwrite these who are before it [e.g. <code>@media (min-width: 840px) {...}</code> will overwrite <code>@media (min-width: 600px) {...}</code> and <code>@media (min-width: 400px) {...}</code>] based on the current viewport.</p>
  <hr />
  <p>I am using Sass to generate multiple <code>@media queries</code> as well as a bunch of <code>classes</code>, but its probably not to something being <em>wrong</em> in the code, but something being <em>missing</em>.</p>
  <p>So what is this supposed to do?</p>
  <p>The number of columns changes based on the viewport.</p>
  <pre><code>$breakpoints: (
  //name  bp      col-count
    xs:   [0      4],
    sm:   [400    4],
    md:   [600    8],
    lg:   [840    12],
    xl:   [1024   12],
    xxl:  [1440   12],
  );
  </code></pre>
  <p>Imagining I am in the <code>xs</code> breakpoint, which reaches froom <code>0px</code> to <code>400px</code>, and I have a column with the class <code>xs:col:11</code>, then I don't want it with to be <code>100vw / (12 / 11)</code> [<code>91.6666667</code>], but <code>100%</code>. So naturally I am trying to overwrite each class, <strong>however</strong>:</p>
  <p><a href="https://i.stack.imgur.com/L4NNP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L4NNP.png" alt="enter image description here" /></a></p>
  <p>It stops overwriting after the second <code>@media querie</code>, I expect it to still be 6 columns until the <code>sm</code> breakpoint.</p>
  <hr />
  <p>Below you can see my code and <a href="https://codepen.io/SimplyCius/pen/RwajMjy" rel="nofollow noreferrer">here</a> is a Codepen too.</p>
  <pre><code>$permanent-grid: true;
  
  @mixin permanent-grid-cols($prefix, $span, $col-count) {
    .#{$prefix}\3A col\3A #{$span} {
      flex: 0 0 #{100vw / ($col-count / $span)};
      max-width: #{100vw / ($col-count / $span)};
    }       
  }
  
  @if($permanent-grid) {
    body {
      @each $breakpoint-name, $breakpoint-content in $breakpoints {
        $breakpoint: nth($breakpoint-content, 1);   
        $col-count: nth($breakpoint-content, 2);
        $prefix: $breakpoint-name;
        
        @if unit($breakpoint) != &quot;&quot; {
          @error 'Breakpoints should not be backed up by a unit. But &quot;#{$breakpoint-name}&quot; in map: #{&quot;$&quot; + &quot;breakpoints&quot;} is backed up by a unit';
        }
        
        @media (min-width: #{$breakpoint}px) {
          @each $breakpoint-nameC, $breakpoint-contentC in $breakpoints {  
            $col-countC: nth($breakpoint-contentC, 2);
            $prefixC: $breakpoint-nameC;
            
            @for $iC from 1 through $col-countC {
              @if $col-count &lt; $iC {
                @include permanent-grid-cols($prefixC, $iC, $iC);
              }
            }
          }
          
          @for $i from 1 through $col-count {
            @include permanent-grid-cols($prefix, $i, $col-count);
          }
        }
      }
    }
  }
  </code></pre>
  <hr />
  <p>This is a fraction of what it compiles to:</p>
  <pre><code>@media (min-width: 600px) {
    body .lg\3A col\3A 9 {
      flex: 0 0 100vw;
      max-width: 100vw;
    }
    body .lg\3A col\3A 10 {
      flex: 0 0 100vw;
      max-width: 100vw;
    }
    body .lg\3A col\3A 11 {
      flex: 0 0 100vw;
      max-width: 100vw;
    }
    body .lg\3A col\3A 12 {
      flex: 0 0 100vw;
      max-width: 100vw;
    }
    body .xl\3A col\3A 9 {
      flex: 0 0 100vw;
      max-width: 100vw;
    }
    body .xl\3A col\3A 10 {
      flex: 0 0 100vw;
      max-width: 100vw;
    }
    body .xl\3A col\3A 11 {
      flex: 0 0 100vw;
      max-width: 100vw;
    }
    body .xl\3A col\3A 12 {
      flex: 0 0 100vw;
      max-width: 100vw;
    }
    body .xxl\3A col\3A 9 {
      flex: 0 0 100vw;
      max-width: 100vw;
    }
    body .xxl\3A col\3A 10 {
      flex: 0 0 100vw;
      max-width: 100vw;
    }
    body .xxl\3A col\3A 11 {
      flex: 0 0 100vw;
      max-width: 100vw;
    }
    body .xxl\3A col\3A 12 {
      flex: 0 0 100vw;
      max-width: 100vw;
    }
    body .md\3A col\3A 1 {
      flex: 0 0 12.5vw;
      max-width: 12.5vw;
    }
    body .md\3A col\3A 2 {
      flex: 0 0 25vw;
      max-width: 25vw;
    }
    body .md\3A col\3A 3 {
      flex: 0 0 37.5vw;
      max-width: 37.5vw;
    }
    body .md\3A col\3A 4 {
      flex: 0 0 50vw;
      max-width: 50vw;
    }
    body .md\3A col\3A 5 {
      flex: 0 0 62.5vw;
      max-width: 62.5vw;
    }
    body .md\3A col\3A 6 {
      flex: 0 0 75vw;
      max-width: 75vw;
    }
    body .md\3A col\3A 7 {
      flex: 0 0 87.5vw;
      max-width: 87.5vw;
    }
    body .md\3A col\3A 8 {
      flex: 0 0 100vw;
      max-width: 100vw;
    }
  }
  </code></pre>