如何在sass中使用`^[N]`语法 [英] How to use `^[N]` syntax in sass

问题描述

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

推荐答案

手写笔功能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]`语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！