CODEWITHSUNDEEP
csssassscss-mixins
Christian May
Christian May

Reputation: 326

Using sass selector functions inside a reusable function

I'm looking at solving a specific problem with SASS - I want to append a pseudo-class to the selectors of a lot of old legacy styles, and ideally I'd like to do it in a DRY way.

I saw that sass enables you to append to a selectors using the selector-append function - however, I can't seem to figure out a way to write some sort of reusable function in sass that calls such a function to modify a selector.

Here's what I've tried:

@function optOut($selector) {
    @return selector-append($selector, ":not(:where(*.opt-out))");
}

optOut(div) {
    color: black;
}

But, depending on the sass compiler I use, it either does not compile or just compiles to:

optOut(div) {
    color: black;
}

I'd like it to compile to this:

div:not(:where(*.opt-out)) {
    color: black;
}

Any help is greatly appreciated - thank you so much for your time and knowledge.

Upvotes: 1

Views: 617

Answers (1)

Dan Mullin
Dan Mullin

Reputation: 4435

You just need to interpolate the return value of the function like so:

@function optOut($selector) {
    @return selector-append($selector, ":not(:where(*.opt-out))");
}

#{optOut(div)} {
    color: black;
}

Upvotes: 2

Related Questions