从下一个数组条目中获取@each vars 中的 SCSS Mixin答案

【问题标题】：Get in SCSS Mixin inside @each vars from next array entrie从下一个数组条目中获取@each vars 中的 SCSS Mixin
【发布时间】：2018-12-29 00:16:03
【问题描述】：

我想提高前端的质量标准，今天为背景图像部分构建一个小帮手：

.html

<div></div>

.scss

@mixin backgroundImage($path: '/assets/images', $fileName: null, $supports: null, $fileType: '.jpg', $unitType: 'px', $startFrom: 0) {
    @each $res in $supports {
        @media only screen and (min-width: $startFrom / 720 / 1280 / 1920 / 2560 / Last not need) and (max-width: $res#{$unitType}) {
            background-image: url("#{$path}#{$fileName}-#{$res}#{$fileType}");
        }
    }
}

div {
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%, 50%;
    background-color: navajowhite;
    @include backgroundImage($fileName: 'background', $supports: (720, 1280, 1920, 2560, 3840), $startFrom: 480);
}

我尝试创建一个 stackblitz，但后来意识到我无法上传图像。因此，如果您需要一个演示来测试，请在根目录下创建 index.html 将是一个名为 assets/images/ 的文件夹，并在那里放置 5 个名为 background-720、background-1280 等的文件...

好的，重点是我需要在这里：(min-width: $startFrom / 720 / 1280 / 1920 / 2560 / Last not need) 进入每个@each 的最后一个$supports 的数量@each。就在第一个@each 我需要使用$startFrom

我知道它令人困惑。但我以前从未写过复杂的 SCSS Mixins。我希望有人可以帮助我。

【问题讨论】：

标签： css sass styles stylesheet scss-mixins

【解决方案1】：

我认为您唯一的问题是路径之间缺少斜杠，因为它解析为/assets/imagesbackground-$sz.jpg，而且我也不认为您需要$startFrom，因为您可以将其添加到@ 987654323@数组。

这是我改成的，它似乎工作得很好：

@mixin backgroundImage($path: '@/assets/images', $fileType: '.jpg', $unitType: 'px', $fileName: null, $supports: null, $startFrom: 0) {
  @each $size in $supports {
    @media only screen and (min-width: $startFrom#{$unitType}) and (max-width: $size#{$unitType}) {
      background-image: url("#{$path}/#{$fileName}-#{$size}#{$fileType}");
    }
  }
}

【讨论】：

【解决方案2】：

好的，我现在知道了...最终的工作代码：

@mixin resBgImg($path: '/assets/images/', $fileName: null, $resolutions: null, $fileType: '.jpg', $unitType: 'px', $startFrom: 0)
    @for $i from 1 through length($resolutions)
        $min: $startFrom
        @if $i > 1
            $min: nth($resolutions, $i - 1)
        $max: nth($resolutions, $i)
        @if $i == length($resolutions)
            @media only screen and (min-width: $min + 1+$unitType)
                background-image: url("#{$path}#{$fileName}-#{$max}#{$fileType}")
        @else
            @media only screen and (min-width: $min + if($i > 1, 1, 0)+$unitType) and (max-width: $max+$unitType)
                background-image: url("#{$path}#{$fileName}-#{$max}#{$fileType}")

【讨论】：