在可重用函数中使用 sass 选择器函数

Question

我正在考虑使用 SASS 解决一个特定问题 - 我想将一个伪 class 添加到许多旧的遗留样式的选择器中，理想情况下我想要以干燥的方式进行。

我看到 sass 使您能够使用 selector-append 函数附加到选择器 - 但是，我似乎无法想出一种方法来在 sass调用这样的函数来修改选择器。

这是我尝试过的方法：

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

optOut(div) {
    color: black;
}

但是，根据我使用的 sass 编译器，它要么不编译，要么只编译为：

optOut(div) {
    color: black;
}

我希望它编译成这样：

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

非常感谢任何帮助 - 非常感谢您的时间和知识。

Answer 1

您只需像这样对函数的 return 值进行插值：

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

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

Using sass selector functions inside a reusable function