SASS Mixin重写&(&符)

cjb*_*rth 5 sass compass-sass compass

我正在尝试编写一个mixin,它将在输出上修改父选择器。这个想法是,在调用mixin的情况下,父选择器将需要对其进行字符串替换。我已经完成了大部分工作,但是我不知道该如何吞咽&

.test {
  @include alt_parent() {
    content: 'test';
  }
}
Run Code Online (Sandbox Code Playgroud)

mixin是这样的:

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

我有字符串替换工作,所以这不是问题。我得到的是这个(我理解为什么):

.test .text {
  content: 'test';
}
Run Code Online (Sandbox Code Playgroud)

我想要的是:

.text {
  content: 'test';
}
Run Code Online (Sandbox Code Playgroud)

cjb*_*rth 3

您必须使用该@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;
        }
    }
}
Run Code Online (Sandbox Code Playgroud)