Question

我无法找到问题的答案：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);

密新

@mixin media($min, $max: false) {
    @if $max == false {
        @if $min == xs {
            @media (min-width: 0px) {
                @content;
            }
        }
        @media (min-width: #{map-get($breakpoints,$min)}) {
            @content;
        }
    } @else if $min == 0 {
        @media (max-width: (#{map-get($breakpoints,$max)} - 1)) {
            @content;
        }
    } @else {
        @media (min-width: #{map-get($breakpoints,$min)}) and (max-width: (#{map-get($breakpoints,$max)} - 1)) {
            @content;
        }
    }
}

我写了这个：

@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;
            }
        }
    }
}

好的，这有效，但我不喜欢它。我更喜欢第一个版本。

第一个版本无法正常工作吗？或者这是一个错误？

提前致谢！

Answer 1

您的代码无效的唯一原因是您必须在要创建的地图中传递字符串。

$ column-count应该是一个整数，以便进行宽度操作(width: 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;
            }
        }
    }
}

https://codepen.io/anon/pen/LLBPaP

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

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

1 个答案: