SASS даги @at-root директиваси
@at-root директиваси
қоидаларни ота-селектордан
файл илдизига чиқариш учун мўлжалланган.
Келинг, биринчи даражали киритиш селекторлари билан куйидаги мисолни кўрайлик:
.parent {
background-color: #fdd;
@at-root .child {
border: 1px solid;
}
}
Компиляция натижасида биз куйидаги кодни олдик:
.parent {
background-color: #fdd;
}
.child {
border: 1px solid;
}
Энди @at-root директивасининг
bир нечта селектор билан ишлашини кўрайлик:
.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;
}
}