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

【问题标题】：Using sass selector functions inside a reusable function在可重用函数中使用 sass 选择器函数
【发布时间】：2021-08-14 06:23:44
【问题描述】：

我正在考虑解决 SASS 的一个特定问题 - 我想将一个伪类附加到许多旧式遗留样式的选择器中，理想情况下我想以 DRY 方式完成。

我看到 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;
}

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

【问题讨论】：

【解决方案1】：

你只需要像这样插入函数的返回值：

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

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

【讨论】：