时间戳

首页 > 解决方案 > 是否可以使用 SASS 创建包含选择器的函数（或其他东西）？

sass - 是否可以使用 SASS 创建包含选择器的函数（或其他东西）？

问题描述

我希望能够写：

div {
    background-size: 100%;
    @bgimgfunction('img1.png');
}

并让 SASS 产生类似的东西：

div {
    background-size: 100%;
    
    /* Generated by the call to @bgimgfunction */

    background-image:('/img/img1-medium.png');
    @media (max-width: 640px) {
        background-image:('/img/img1-low.png');
    }

    @media (min-width: 1600px) {
        background-image:('/img/img1-high.png');
    }

    /* End generated by the call to @bgimgfunction */
}

mixins我认为不起作用，因为我无法传递参数

functions我认为不起作用，因为它们仅在选择器之后才有效。

有没有办法做到这一点？

标签： sass

解决方案

你需要的是一个带有参数的@mixin。鉴于图像 URL 的结构，我认为您需要两个参数，一个用于图像名称，一个用于其扩展名：

@mixin bgImageFunction($imageName, $imageExt) {
    $path: '/img/' + $imageName;
    
    background-image: url("#{$path}-medium.#{$imageExt}");
    
    @media (max-width: 640px) {
        background-image: url("#{$path}-low.#{$imageExt}");
    }

    @media (min-width: 1600px) {
        background-image: url("#{$path}-high.#{$imageExt}");
    }
}

div {
    background-size: 100%;
    @include bgImageFunction('img1', 'png');
}

您还可以为扩展使用默认参数，并且仅将名称作为参数传递：

@mixin bgImageFunction($imageName, $imageExt: 'png') {
    ...
}

推荐阅读