SASS Mixin 重写 & (&)答案

【问题标题】：SASS Mixin Rewrite & (ampersand)SASS Mixin 重写 & (&)
【发布时间】：2023-04-02 14:59:01
【问题描述】：

我正在尝试编写一个 mixin 来修改输出时的父选择器。这个想法是，在调用 mixin 的情况下，父选择器将需要对其进行字符串替换。我有大部分工作，但我不知道如何吞下&。

.test {
  @include alt_parent() {
    content: 'test';
  }
}

mixin 是这样的：

@mixin alt_parent() {
  #{str-replace(unquote("#{selector_append(&)}"), "s", "x")} {
    @content;
  }
}

我有字符串替换工作，所以这不是问题。我得到的是这个（我明白为什么）：

.test .text {
  content: 'test';
}

我想要的是这个：

.text {
  content: 'test';
}

【问题讨论】：

标签： sass compass-sass compass

【解决方案1】：

您必须使用@at-root 指令来阻止自动包含由& 表示的选择器。

http://alwaystwisted.com/articles/2014-03-08-using-sass-33s-at-root-for-piece-of-mind

@mixin alt_parent($parent) {
    @at-root {
        #{str-replace(unquote("#{selector_append(&)}"), "s", "x")} {
            @content;
        }
    }
}

【讨论】：