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

Директива `@at-root` предназначена для извлечения правил из селектора-родителя в корень файла.

Давайте рассмотрим следующий пример с селекторами первого уровня вложения:

`.parent { background-color: #fdd; @at-root .child { border: 1px solid; } }`

В результате компиляции у нас получился следующий код:

`.parent { background-color: #fdd; } .child { border: 1px solid; }`

А теперь посмотрим на работу директивы `@at-root` с несколькими селекторами:

`.main-parent { background-color: #fdd; @at-root { .first-child { border: 1px solid; } .second-child { font-weight: bold; } } .step-child { color: #232523; } }`

После компиляции код выглядит вот так:

`.main-parent { background-color: #fdd; } .first-child { border: 1px solid; } .second-child { font-weight: bold; } .main-parent .step-child { color: #232523; }`

Расскажите, каким будет результат компиляции следующего кода:

`.primary-button { background-color: #3272c7; @at-root { .block-button { color: #ff0000; } .content-button { color: #ccb42a; } } .warning-button { border: 2px solid #232523; } }`
← →
↑