Блог

Решаемая

Итак, я создавал этот grid-фреймворк, когда наткнулся на проблему, о которой ни у меня не было раньше, ни я не могу найти никаких доказательств в Интернете.

Короче: когда у меня есть несколько @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 точке останова, которая достигает froom 0px до 400px , и у меня есть столбец с классом xs:col:11 , тогда я не хочу, чтобы это было 100vw / (12 / 11) [ 91.6666667 ], но 100% . Поэтому, естественно, я пытаюсь перезаписать каждый класс, однако:

Перезапись прекращается после второго @media querie , я ожидаю, что до sm точки останова все еще будет 6 столбцов.

Ниже вы можете увидеть мой код, и здесь также есть Codepen.

 $permanent-grid: true;

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

Я исправил это сам, дело было не в @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);
            }
          }
        }