sass prepend корневой класс к текущему селектору

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