我想提高前端的质量标准,今天为背景图像部分构建一个小帮手:
.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。我希望有人可以帮助我。