检测包含 Mixin 的位置答案

【问题标题】：Detect where a Mixin is included检测包含 Mixin 的位置
【发布时间】：2022-03-27 03:41:44
【问题描述】：

有没有办法确定混入的位置？即：

包括

@include test();

.test {
    @include test();
}

混音

@mixin test(){
    @if (weAreNested) {
        // We are in a css selector
        &.test {}
    } @else {
        // we are not inside any selector
        .test {}
    }
}

那么，我们可以使用某种指令来执行此操作吗？

在选择器之前使用 & 已经知道我们是否处于基础级别并且不会编译 css 文件，所以我想知道他们是否有办法让我们测试它？

干杯

【问题讨论】：

您使用的是原始的 Ruby Sass 编译器，还是为其他语言编写的众多实现之一？

标签： css sass mixins

【解决方案1】：

我不知道这在技术上是否可行，但我很确定这不是一个好主意。

如果您将 mixin 视为任何编程语言中的类似函数，则可以将您的问题重新表述为“函数能否确定从何处调用它以触发不同的功能”。虽然这在许多语言中确实是可能的 - 例如通过处理当前的“堆栈跟踪” - 将它用于除调试以外的任何其他事情肯定会导致难以维护的代码。

更具体地说，您的示例显示了一个 mixin 执行两个完全不同的工作：

weAreNested 分支将一些规则添加到特定规则集中，只要匹配的元素也有一个附加类
else 分支为匹配特定类的所有元素创建全局规则；事实上，这个例子并没有通过作为一个 mixin 获得任何好处，尽管一个带有参数的例子是可能的

在我看来这是一个更好的主意：

任何一个都有两个 mixin，命名得当，甚至可能通过第三个 mixin 共享实现
或使用 mixin 的参数来明确说明您想要的行为，而不是从调用 mixin 的上下文中“神奇地”推断出它

【讨论】：

【解决方案2】：

不确定这在提出这个问题时是否有效（早在 2014 年），但至少在 lib-sass 3.5.5（我目前正在使用，仍然很旧）中，您可以简单地查看 &看看它是否为空。

示例：因此，在您的情况下，我们只需检查& != null，然后我们就知道可以使用它，即：

@mixin test(){
    @if (& != null) {
        // We are in a css selector
        &.test {}
    } @else {
        // we are not inside any selector
        .test {}
    }
}

【讨论】：