如何在 sass 中使用 `^[N]` 语法答案

【问题标题】：How to use `^[N]` syntax in sass如何在 sass 中使用 `^[N]` 语法
【发布时间】：2021-09-18 02:08:12
【问题描述】：

我从手写笔迁移到 sass。在手写笔中，您可以使用^[N] 进行部分引用。如何在 sass 中做到这一点？

【问题讨论】：

标签： sass stylus

【解决方案1】：

Stylus 功能Partial Reference 在 SCSS/SASS 中没有直接等效功能。在 SASS 中，& 始终包含完整的父选择器，并且没有仅检索其中一部分的功能。

但是……

特殊的@at-root 抛弃父母并...
一种在局部范围变量中捕获父选择器并使用string interpolation 从中创建选择器的组合技术。

看看它的作用：

.foo {
    .bar { color: red; }
    @at-root .bar { display: block; }
}

renders to:

.foo .bar { color: red; }
.bar { display: block; }

和

.foo {
    $block-class: &;
    &__header {
        font-size: medium;
        @at-root #{$block-class}.large-header & { font-size: large; }
    }
    &__footer {
        color: red;
    }
}

renders to:

.foo__header {
  font-size: medium;
}
.foo.large-header .foo__header {
  font-size: large;
}

.foo__footer {
  color: red;
}

请注意：我不建议使用如此复杂的 SCSS 体操来给任何需要阅读您的代码的人留下深刻印象和困惑。真的，只要保持简单。有时在代码中重复一个选择器是正确的做法。没有伤害。

【讨论】：