Css sass将根类前置到当前选择器

我在sass中将根类预编到当前选择器时遇到问题。我有以下代码：

.cta两列{
&__文本保持器{
@在根上&{uuuu-inner}{
//还尝试了@at root uu internal&{#}
//还有许多其他人喜欢@at-root\uuuuu-inner
填充：rem（25px）；
}
}
}

但这给了我以下信息：

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

我不理解上面的内容-根目录下的

有什么意义，你也可以这样做
&\uu inner
，因为它给了我与我尝试过的两件事情相同的东西

我该怎么去

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

不必求助于

.cta两列{
&__文本保持器{
.cta-双柱内{
填充：rem（25px）；
}
}
}

或者，这是在sass中执行此操作的唯一方法吗？
@at root
并不像您在本例中所想的那样工作<根目录下的code>@at

只需在嵌套外部进行声明。为了更好地理解，请添加另一个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);
}

简单地想象一下，如果不在根目录下创建选择器，那么它将在外部创建

如果没有它，将产生以下结果：

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

然后我们只需省略

.cta-two-columns\uu 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);
}

---

您还可以将

&

放入变量（例如

$self:&；

）中，然后将其与\uuu inner一起使用。类似于

{$self}\uuu-inner

。但是，这和你上次写的代码没什么不同…：/很好的解决方案一如既往-从未想过使用变量