Is it possible to create functions (or something else) that include selectors with SASS?

Question

I want to be able to write:

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

and have SASS produce something like:

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 I think don't work because I can't pass a parameter

functions I think don't work because they are only valid after a selector.

Is there a way to do this?

question from:https://stackoverflow.com/questions/65847764/is-it-possible-to-create-functions-or-something-else-that-include-selectors-wi

Answer 1

What you need is a @mixin which does take parameters. Given the structure of your image URLs, I think you need two arguments, one for the image name and one for its extension:

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

You can also use a default parameter for the extension and only pass the name as argument:

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