在Sass中，如何引用父选择器并排除任何祖父母？

我有以下sass代码：

.class{
    label{
        color:#fff;
        .disabled &{color:#333; }
    }
}

哪个输出

.disabled .class label

是否有一种方法可以在不包含任何祖辈选择器的情况下输出父选择器？像这样：

.disabled label

---

据我所知，在SASS中，当使用父引用时，无法从祖先选择器中进行拾取和选择。不过，对于代码，稍加重组就可以得到相同的结果：

label {
    .class & {
        color: #fff;
    }

    .disabled & {
        color:#333;
    }
}

汇编至：

.class label {
  color: #fff; }
.disabled label {
  color: #333; }

---

父选择器始终是对上一嵌套级别的整个已解析选择器的引用。没有“父对象”或“祖辈对象”的概念，尤其是在连接选择器或在末尾使用父对象选择器时更是如此

免责声明：除非您真的需要，否则我不建议您这样做

从Sass 3.4开始，您可以使用

&

作为变量来提取选择器的部分。当以这种方式使用时，您将得到一个字符串列表（可以循环，等等）

提取选择器的一部分或片段 此函数在此处使用与字符串切片函数相同的参数样式：

@function selector-slice($sel, $start: 1, $end: -1) {
    $collector: ();
    @each $s in $sel {
        // calculate our true start and end indices when given negative numbers
        $_s: if($start > 0, $start, length($s) + $start + 1);
        $_e: if($end > 0, $end, length($s) + $end + 1);
        $c: ();
        @for $i from $_s through $_e {
            $c: append($c, nth($s, $i));
        }
        // prevent duplicates from creeping in
        @if not index($collector, $c) {
            $collector: append($collector, $c);
        }
    }
    @return $collector;
}

/* complex example */
.one-a, .one-b {
    two {
        three {
            color: red;

            &:before {
                @at-root #{selector-slice(&, 2, 3)} {
                    color: green;
                }
            }
        }
    }
}

/* your example */
.class {
    label {
        color:#fff;
        @at-root #{selector-slice(&, -1, -1)} {
            .disabled & {
                color:#333;
            }
        }
    }
}

输出：

/* complex example */
.one-a two three, .one-b two three {
  color: red;
}
two three:before {
  color: green;
}

/* your example */
.class label {
  color: #fff;
}
.disabled label {
  color: #333;
}

.one-a two three, .one-b two three {
  color: red;
}
three:before two {
  color: green;
}

.class label {
  color: #fff;
}
.disabled label {
  color: #333;
}

作为额外的好处，您可以使用此功能通过在较小索引之前传入较大索引来颠倒选择器的顺序

.one-a, .one-b {
    two {
        three {
            color: red;

            &:before {
                @at-root #{selector-slice(&, 3, 2)} {
                    color: green;
                }
            }
        }
    }
}

输出：

/* complex example */
.one-a two three, .one-b two three {
  color: red;
}
two three:before {
  color: green;
}

/* your example */
.class label {
  color: #fff;
}
.disabled label {
  color: #333;
}

.one-a two three, .one-b two three {
  color: red;
}
three:before two {
  color: green;
}

.class label {
  color: #fff;
}
.disabled label {
  color: #333;
}

相关的：

用另一个类替换一个类 或者，如果您希望用另一个类替换一个类，则可以使用标准库中的

选择器replace

函数

.class {
    label {
        color:#fff;
        @at-root #{selector-replace(&, '.class', '.disabled')} {
            color:#333;
        }
    }
}

输出：

/* complex example */
.one-a two three, .one-b two three {
  color: red;
}
two three:before {
  color: green;
}

/* your example */
.class label {
  color: #fff;
}
.disabled label {
  color: #333;
}

.one-a two three, .one-b two three {
  color: red;
}
three:before two {
  color: green;
}

.class label {
  color: #fff;
}
.disabled label {
  color: #333;
}

---

尽管hopper并没有完全错，但实际上您可以使用变量选择父级

您可以通过以下方式实现您想要的：

.class{
标签{
颜色：#fff；
$selector:n（&，1）；
$directparent:n（$selector，length（$selector））；
@在根#{$directparent}{
.disabled&{color:#333；}
};
}
}

这将生成此css：

.class标签{
颜色：#fff；
}
.禁用标签{
颜色：#333；
}