捕获已解析的SASS父选择器

我试图找到一种方法来捕获SASS（运行3.2.3）中解析的父选择器（

&

），很可能是在mixin中

不幸的是（我发现在github上对此进行了讨论），以下go-to解决方案不起作用：

@mixin append-to-captured-parent($append) {
    $selector: "&-#{$append}";
    #{$selector} { @content; }
}

.foo {
    @include append-to-captured-parent("bar") {
        color: blue;
    }
}

所需输出为：

.foo .foo-bar { color: blue; }

是否有任何黑客或变通方法可以产生所需的输出？据我所知，这很可能是不可能的，因为直到SASS解析器构建了整个节点树，父选择器才被解析，在这一点上它遇到了

&-bar{…}

，它就死了：

Syntax error: Invalid CSS after "&": expected "{", was "-bar"

我们能欺骗SASS先发制人地解决这个问题吗

---

注意：我非常愿意接受可以实现这一点的SASS扩展（Ruby-libs）；不幸的是，目前我还没有足够的Ruby知识来开发自己的Ruby（不过我正在开发）

嗯，我已经想出了一个解决办法

这种方法仅仅隔离了预期的功能，并独立于实际的层次结构对其进行管理

首先，一些快速实用程序：

@function slice($list, $from, $into) {
    $result: ();
    @for $index from $from through $into {
        $result: append($result, nth($list, $index));
    }
    @return $result;
}

@function implode($list, $separator) {
    $result: nth($list, 1);
    @for $index from 2 through length($list) {
        $result: #{$result}#{$separator}#{nth($list, $index)};
    }
    @return $result;
}

然后勇气：

$-class: ();
@function get-class() {
    $top: if(length($-class) - 2 < 1, 1, length($-class) - 2);
    @return implode(slice($-class, $top, length($-class)), "-");
}

@mixin class($name) {
    $-class: append($-class, $name);
    .#{get-class()} {
        @content;
    }
    $-class: slice($-class, 1, length($-class) - 1);
}

将产生：

.foo { color: red; }
.foo .foo-bar { color: blue; }

一个不那么简单的例子是：

@include class(list) {
    test: "list";
    @include class(item) {
        test: "item";
        @include class(heading) {
            test: "heading";
        }
        @include class(content) {
            test: "content";
            @include class(graphic) {
                test: "graphic";
            }
            @include class(summary) {
                test: "summary";
            }
            @include class(details) {
                test: "details";
            }
        }
        @include class(footing) {
            test: "footing";
        }
    }
}

制作：

.list { test: "list"; }
.list .list-item { test: "item"; }
.list .list-item .list-item-heading { test: "heading"; }
.list .list-item .list-item-content { test: "content"; }
.list .list-item .list-item-content .item-content-graphic { test: "graphic"; }
.list .list-item .list-item-content .item-content-summary { test: "summary"; }
.list .list-item .list-item-content .item-content-details { test: "details"; }
.list .list-item .list-item-footing { test: "footing"; }

---

@法院Nah；这是在黑暗中拍摄的。正如我所提到的，似乎解析器在使用无效语法后会执行父选择器替换。@好吧，我已经用解决方法回答了我的问题；看看你是否感兴趣。

.list { test: "list"; }
.list .list-item { test: "item"; }
.list .list-item .list-item-heading { test: "heading"; }
.list .list-item .list-item-content { test: "content"; }
.list .list-item .list-item-content .item-content-graphic { test: "graphic"; }
.list .list-item .list-item-content .item-content-summary { test: "summary"; }
.list .list-item .list-item-content .item-content-details { test: "details"; }
.list .list-item .list-item-footing { test: "footing"; }