css - sass 将根类添加到当前选择器

Question

我在将根类添加到我当前的 sass 选择器之前遇到了问题。我有以下代码:

.cta-two-columns {
  &__text-holder {
    @at-root&#{__inner} {

    // also tried @at-root __inner&{#}
    // and many others like  @at-root__inner

      padding: rem(25px);
    }
  }
}

但这给了我以下信息:

.cta-two-columns__text-holder__inner {
  padding: rem(25px);
}

我不明白上面的内容 - at-root 有什么意义，你也可以这样做 &__inner 因为它给了我与这两件事相同的东西我已经证明我尝试过了

如何获取

.cta-two-columns__text-holder .cta-two-columns__inner {
}

无需诉诸

.cta-two-columns {
  &__text-holder {
    .cta-two-columns__inner {
      padding: rem(25px);
    }
  }
}

或者这是在 sass 中执行此操作的唯一方法？

Answer 1

@at-root 在这种情况下并不像您想象的那样有效。 @at-root 将简单地在嵌套外部进行声明。为了更好地理解，添加另一个 CSS 声明，如下所示:

.cta-two-columns {
  &__text-holder {

    margin: 10px;
    @at-root&#{__inner} {

      padding: rem(25px);
    }
  }
}

这将产生以下 CSS 代码:

.cta-two-columns__text-holder {
  margin: 10px;
}
.cta-two-columns__text-holder__inner {
  padding: rem(25px);
}

简单地想象一下如何在没有 @at-root 的情况下创建选择器，然后将其放在外面。

没有它会产生这个:

.cta-two-columns__text-holder {
  margin: 10px;
}
.cta-two-columns__text-holder .cta-two-columns__text-holder__inner {
  padding: rem(25px);
}

然后我们简单地省略 .cta-two-columns__text-holder。

---

获得所需内容的一个想法是考虑一个变量，您可以在其中声明主类，然后您将能够嵌套任意数量的元素:

$sel: '.cta-two-columns';

#{$sel}__text-holder {
   #{$sel}__inner {
    padding: rem(25px);
  }
}

将产生:

.cta-two-columns__text-holder .cta-two-columns__inner {
  padding: rem(25px);
}

有更多嵌套元素:

$sel: '.cta-two-columns';

#{$sel}__text-holder {
   #{$sel}__outer {
      #{$sel}__inner{
        #{$sel}__wrap{
          padding: rem(25px);
      }
    }
  }
}

将产生

.cta-two-columns__text-holder .cta-two-columns__outer .cta-two-columns__inner .cta-two-columns__wrap {
  padding: rem(25px);
}