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

Question

我从手写笔迁移到 sass。在手写笔中，您可以使用 ^[N] 进行部分引用。如何在 sass 中执行此操作？

Answer 1

手写笔功能 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 体操来给任何需要阅读您的代码的人留下深刻印象和混淆。真的，只是保持简单。有时在代码中重复一个选择器是正确的做法。没有造成伤害。

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

How to use `^[N]` syntax in sass

stylus

sass