Директива @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;
}
}