媒体查询停止覆盖？

Question

已解决

---

所以 - 我一直在构建这个网格框架，当我偶然发现一个问题时，我以前没有，也无法在网上找到任何证据。

---

简而言之：当我有多个@media queries这样排列时：

@media (min-width: 400px) {...}
@media (min-width: 600px) {...}
@media (min-width: 840px) {...}

我希望每个人都覆盖之前的这些人 [例如@media (min-width: 840px) {...} 将根据当前视口覆盖 @media (min-width: 600px) {...} 和 @media (min-width: 400px) {...}]。

---

我正在使用 Sass 生成多个 @media queries 以及一堆 classes，但它可能不是代码中的错误，而是缺少的东西。

那么这应该怎么做呢？

列数根据视口而变化。

$breakpoints: (
//name  bp      col-count
  xs:   [0      4],
  sm:   [400    4],
  md:   [600    8],
  lg:   [840    12],
  xl:   [1024   12],
  xxl:  [1440   12],
);

想象我在xs 断点，从0px 到400px，我有一个带有xs:col:11 类的列，那么我不希望它是100vw / (12 / 11) [ 91.6666667]，但是100%。所以我很自然地试图覆盖每个类，然而：

它在第二个@media querie 之后停止覆盖，我希望它在sm 断点之前仍然是 6 列。

---

您可以在下面看到我的代码，here 也是 Codepen。

$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) != "" {
        @error 'Breakpoints should not be backed up by a unit. But "#{$breakpoint-name}" in map: #{"$" + "breakpoints"} 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 < $iC {
              @include permanent-grid-cols($prefixC, $iC, $iC);
            }
          }
        }
        
        @for $i from 1 through $col-count {
          @include permanent-grid-cols($prefix, $i, $col-count);
        }
      }
    }
  }
}

---

这是编译后的一小部分：

@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;
  }
}

Answer 1

我自己修复了它，它与 @media queries 无关，而是正确的循环和覆盖技术。 Codepen.

这个：

    @each $breakpoint-nameC, $breakpoint-contentC in $breakpoints {
              $col-countC: nth($breakpoint-contentC, 2);
              $prefixC: $breakpoint-nameC;

              @if $breakpoint-nameC != $breakpoint-name {
                @if $col-countC != $col-count {
                  @for $iC from 1 through ($col-countC - ($col-countC - $col-count)) {
                    @include permanent-grid-cols($prefixC, $iC, $col-countC - ($col-countC - $col-count));
                  }
                  
                  @for $iC from $col-count + 1 through $col-countC{
                    @include permanent-grid-cols($prefixC, $iC, $iC);
                  }
                }
              }
            }

这样的：

@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 < $iC {
              @include permanent-grid-cols($prefixC, $iC, $iC);
            }
          }
        }