捕获已解析的 SASS 父选择器答案

【问题标题】：Capturing the resolved SASS parent selector捕获已解析的 SASS 父选择器
【发布时间】：2013-03-24 01:05:46
【问题描述】：

我正在尝试找到一种方法来在 SASS（运行 3.2.3）中捕获已解析的父选择器 (&)，可能在 mixin 中。

不幸的是（我在 github 上找到了对此的讨论）以下首选解决方案不起作用：

@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 库）持开放态度；不幸的是，此时我还不够精通 Ruby，无法自己动手（我正在努力）

【问题讨论】：

@CourtS Nah;这是在黑暗中拍摄的。正如我所提到的，解析器似乎在被无效语法阻塞后执行了父选择器替换。
@CourtS 好吧，我已经通过解决方法回答了我的问题；有兴趣可以看看。

标签： sass

【解决方案1】：

嗯，我想出了一个变通办法。

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

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

@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);
}

这里发生的情况是，“全局”变量$-class 在每次调用mixin class 时维护一个嵌套堆栈。它通过内爆堆栈上的前三个名称来创建 CSS 类声明（如果需要，可以将其修改为完整堆栈）

所以复制问题的例子：

@include class (foo) {
    color: red;
    @include class (bar) {
        color: blue;
    }
}

将产生：

.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"; }

【讨论】：