媒体查询停止覆盖？

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，并且我有一个包含 class xs:col:11 的列，那么我不希望它成为 100vw / (12 / 11) [91.6666667]，而是 100%。所以很自然地我试图覆盖每个 class, however:

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

下面你可以看到我的代码，here也是一个Codepen。

$permanent-grid: true;

@mixin permanent-grid-cols($prefix, $span, $col-count) {
  .#{$prefix}A colA #{$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 .lgA colA 9 {
    flex: 0 0 100vw;
    max-width: 100vw;
  }
  body .lgA colA 10 {
    flex: 0 0 100vw;
    max-width: 100vw;
  }
  body .lgA colA 11 {
    flex: 0 0 100vw;
    max-width: 100vw;
  }
  body .lgA colA 12 {
    flex: 0 0 100vw;
    max-width: 100vw;
  }
  body .xlA colA 9 {
    flex: 0 0 100vw;
    max-width: 100vw;
  }
  body .xlA colA 10 {
    flex: 0 0 100vw;
    max-width: 100vw;
  }
  body .xlA colA 11 {
    flex: 0 0 100vw;
    max-width: 100vw;
  }
  body .xlA colA 12 {
    flex: 0 0 100vw;
    max-width: 100vw;
  }
  body .xxlA colA 9 {
    flex: 0 0 100vw;
    max-width: 100vw;
  }
  body .xxlA colA 10 {
    flex: 0 0 100vw;
    max-width: 100vw;
  }
  body .xxlA colA 11 {
    flex: 0 0 100vw;
    max-width: 100vw;
  }
  body .xxlA colA 12 {
    flex: 0 0 100vw;
    max-width: 100vw;
  }
  body .mdA colA 1 {
    flex: 0 0 12.5vw;
    max-width: 12.5vw;
  }
  body .mdA colA 2 {
    flex: 0 0 25vw;
    max-width: 25vw;
  }
  body .mdA colA 3 {
    flex: 0 0 37.5vw;
    max-width: 37.5vw;
  }
  body .mdA colA 4 {
    flex: 0 0 50vw;
    max-width: 50vw;
  }
  body .mdA colA 5 {
    flex: 0 0 62.5vw;
    max-width: 62.5vw;
  }
  body .mdA colA 6 {
    flex: 0 0 75vw;
    max-width: 75vw;
  }
  body .mdA colA 7 {
    flex: 0 0 87.5vw;
    max-width: 87.5vw;
  }
  body .mdA colA 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);
            }
          }
        }

媒体查询停止覆盖？

Media queries stop overwriting?

html

css

sass

media-queries

已解决