Директива @at-root

@at-root изымает одно или несколько правил из родительского селектора в корневой уровень документа. Такой способ можно использовать с селекторами первого уровня вложения:

scss
.parent {
  ...
  @at-root .child { ... }
}

.parent
  ...
  @at-root .child ...
css
.parent { ... }
.child { ... }

Также этот способ может быть использован с несколькими селекторами:

scss
.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }

  .step-child { ... }
}

.parent
  ...
  @at-root
    .child1 ...
    .child2 ...

  .step-child ...
css
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

Предыдущая страница

Вложение @extend в директивы

Следующая страница

Использование условий

Ваша 
Поддержка