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);
}