从下一个阵列条目开始,如何在@each年内进入SCSS Mixin?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (41)

我想提高我的正面质量标准,今天为背景图像部分建立一个小助手:

.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,但后来意识到,我无法上传那些图像。 因此,如果你需要一个测试的演示,请在root中创建index.html将是一个名为assets / images /的文件夹,并在那里放置5个名为background-720,background-1280等的文件

我需要在这里:(最小宽度:$ startFrom / 720/1280/1920/2560 /最后不需要)让每个@each获得最后一个@each的$ support数量。 就在第一个@each我需要使用$ startFrom

我知道它令人困惑。 但我以前从未写过复杂的SCSS Mixins。

提问于
用户回答回答于

试试这个:

@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}")
用户回答回答于

我认为你唯一的问题是你在这条路之间漏掉了一个斜线,因为它决定/assets/imagesbackground-$sz.jpg我也不认为你需要$startFrom,因为您可以将它添加到$supports阵列。

我把它改到这里,它似乎运行得很好:

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

扫码关注云+社区

领取腾讯云代金券