进入SCSS Mixin inside @each vars from next array entrie
进入SCSS Mixin inside @each vars from next array entrie
提问于 2018-07-21 00:19:20
我想提高我的前端质量标准，并为背景图像部分构建一个小助手：
.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，但后来意识到，我不能上传那里的图片。因此，如果你需要一个演示来测试，请在根目录中创建一个名为assets/images/的index.html文件夹，并在其中放置名为background-720、background-1280等的5个文件。
重点是我需要：(min-width: $startFrom / 720 / 1280 / 1920 / 2560 / Last not need)来获取每个@each的$supports数，最后一个@each的个数。在第一个@each中，我需要使用$startFrom
我知道这很让人困惑。但我以前从来没有写过复杂的SCSS Mixins。我希望有人能帮我解决这个问题。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-22 06:44:42
好了我现在明白了..。最终的工作代码：
@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}")Stack Overflow用户
发布于 2018-07-21 02:19:15
我认为您唯一的问题是路径之间缺少一个斜杠，因为它解析为/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}");
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51446697
复制相关文章
相似问题