Создайте столбцы сетки в scss с частицей точки останова в конце - PullRequest
Новая
       17

Создайте столбцы сетки в scss с частицей точки останова в конце

0 голосов
/ 27 августа 2018

Я хочу генерировать сетки медиазапросов, имеющие следующий формат:

Я использую первый подход для больших / настольных систем с плавающей точкой.Это преднамеренно используется вместо подхода «сначала с мобильного». 

@media (max-width: 36em) {
  .col-1@sm {
    width: 25%; }
  .col-2@sm {
    width: 50%; }
  .col-3@sm {
    width: 75%; }
  .col-4@sm {
    width: 100%; } 
}

, начиная со следующей карты конфигурации сетки: 

$grid-config: (

        lg: (
                width: em(960px),
                columns: 16,
                gutter-horizontal: rem(8px)
        ),
        md: (
                width: em(768px),
                columns: 8,
                gutter-horizontal: rem(8px)
        ),
        sm: (
                width: em(568px),
                columns: 4,
                gutter-horizontal: rem(8px)
        ),
);

Для первого элемента на карте (lg) я надеваюне хочу добавлять медиа-запрос.

Первый элемент может измениться, поэтому я не хочу выполнять проверку строки (if bp !=='lg'), если возможно (не как в моем коде)

У меня есть следующий миксин для генерации медиазапрос: 

@mixin media-breakpoint($bp) {

  $columns: get-grid($bp, columns) !global;

  @if $bp != 'lg2' {
    @media (max-width: get-grid($bp, width)) {
      @content
    }
  } @else {
    @content
  }
}

и другой миксин для создания сетки: 

@mixin grid-generator {
  @each $key, $value in $grid-config {
    $bp: $key !global;
    &--#{$key} {
      @content;
    }
  }

}

Затем я использую: 

.col {
  @include grid-generator {
    @include media-breakpoint($bp) {
      $grid-columns: get-grid($bp, 'columns');
      @for $i from 1 through $grid-columns {
        &-#{$i} {
          width: 100%/$grid-columns * $i;
        }
      }
    }
  }
}

, но это генерируетследующий формат col--sm-1, а не col-1@sm.

Проблемы, с которыми я столкнулся:

  • оставьте столбцы внутри набора медиа-запросов и добавьте медиа в конце.
  • сравнить с первым в grid-config динамическом, отметьте if $bp == first in map вместо lg
...