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

您可以简单地使用：

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

您将获得：

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

Answer 2

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

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

2 个答案: