我想提高我的前端质量标准,并为背景图像部分构建一个小助手:
.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。我希望有人能帮我解决这个问题。
https://stackoverflow.com/questions/51446697
复制相似问题