0

我想生成具有以下格式的媒体查询网格：

我使用第一个大型/桌面方法，带有浮动。它是有意使用的，而不是移动优先的方法。

@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)
        ),
);

对于 map(lg) 中的第一个元素，我不想添加媒体查询。

第一个元素可以改变，所以如果可能的话我不想做一个字符串检查(if bp !=='lg')（不像我的代码）

我有以下 mixin 来生成媒体查询：

@mixin media-breakpoint($bp) {

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

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

和另一个生成网格的mixin：

@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.

我遇到的问题：

  • 将 cols 保留在媒体查询集中，并在最后添加媒体。
  • 与动态中的第一个比较grid-config，检查if $bp == first in map，而不是lg
4

0 回答 0