sass@for在@each中，其中@for使用@each的键、值对

我无法找到我问题的答案：WTF-为什么

变数

$breakpointNames: (xs, sm, md, lg, xl);
$breakpointSizes: (480px, 667px, 845px, 1024px, 1280px);
$breakpoints: createMapOutOfLists($breakpointNames, $breakpointSizes);
$masonryLayoutColumnsCount: (2, 2, 3, 4, 4);
$masonryLayoutColumns: createMapOutOfLists($breakpointNames, 
$masonryLayoutColumnsCount);

混合

我写道：

@each $breakpoint, $column-count in $masonryLayoutColumns {
    @include media($breakpoint) {
        .masonry-tile {
            width: 100% / $column-count;
        }
    }

    @for $i from 1 through $column-count {
        @include media($breakpoint) {
            .masonry-tile:nth-child(#{$i}) {
                -webkit-order: $i;
                order: $i;
            }
        }
    }
}

这引发了以下错误：

Error in plugin 'sass'
Message:
../../../app/Resources/assets/sass/functions/_map_generators.scss
Error: 2 is not an integer.
    on line 4 of 
../../../app/Resources/assets/sass/functions/_map_generators.scss
>> merge($map, (#{nth($listOfKeys, $index)}: #{nth($listOfValues, $index)}));
------------------------------------------^

错误出现在错误的地方，或者完全错误，这是另一个问题，目前与我无关

经过一段时间的搜索，没有结果，并试图自己修复它，我得到了它与以下工作：

@for $index from 1 through length($masonryLayoutColumns) {
    $breakpoint: nth($breakpointSizes, $index);
    $column-count: nth($masonryLayoutColumnsCount, $index);

    @include media($breakpoint) {
        .masonry-tile {
            width: 100% / $column-count;
        }
    }

    @for $i from 1 through $column-count {
        @include media($breakpoint) {
            .masonry-tile:nth-child(#{$i}) {
                -webkit-order: $i;
                order: $i;
            }
        }
    }
}

好吧，这样行，但我不喜欢。 我喜欢第一个版本

第一个版本不起作用有什么好的原因吗？还是一只虫子

---

提前谢谢

代码不起作用的唯一原因是您必须在正在创建的映射中传递字符串

$column count应该是整数，以便进行宽度操作

（宽度：100%/$column count；）

我已经附上了一个样本笔，整数数据，这将解决您的问题

$masonryLayoutColumns: (
  '760px': 8,
  '990px': 12,
  '1024px': 16
);

@each $breakpoint, $column-count in $masonryLayoutColumns {
    @media(min-width: $breakpoint) {
        .masonry-tile {
            width: 100% / $column-count;
        }
    }

    @for $i from 1 through $column-count {
        @media(min-width: $breakpoint) {
            .masonry-tile:nth-child(#{$i}) {
                -webkit-order: $i;
                order: $i;
            }
        }
    }
}

---

注意：我没有你的混音，所以我只是写一个通用的媒体查询

您可以发布$masonryLayoutColumns的示例列表吗？

$masonryLayoutColumns: (
  '760px': 8,
  '990px': 12,
  '1024px': 16
);

@each $breakpoint, $column-count in $masonryLayoutColumns {
    @media(min-width: $breakpoint) {
        .masonry-tile {
            width: 100% / $column-count;
        }
    }

    @for $i from 1 through $column-count {
        @media(min-width: $breakpoint) {
            .masonry-tile:nth-child(#{$i}) {
                -webkit-order: $i;
                order: $i;
            }
        }
    }
}