@at-root direktīva SASS
Direktīva @at-root ir paredzēta
likumu izņemšanai no vecāka selektora
faila saknē.
Apskatīsim šādu piemēru ar pirmā līmeņa ligzdošanas selektoriem:
.parent {
background-color: #fdd;
@at-root .child {
border: 1px solid;
}
}
Kompilācijas rezultātā mēs saņēmām šādu kodu:
.parent {
background-color: #fdd;
}
.child {
border: 1px solid;
}
Tagad apskatīsim
direktīvas @at-root darbību ar
vairākiem selektoriem:
.main-parent {
background-color: #fdd;
@at-root {
.first-child {
border: 1px solid;
}
.second-child {
font-weight: bold;
}
}
.step-child {
color: #232523;
}
}
Pēc kompilācijas kods izskatās šādi:
.main-parent {
background-color: #fdd;
}
.first-child {
border: 1px solid;
}
.second-child {
font-weight: bold;
}
.main-parent .step-child {
color: #232523;
}
Pastāstiet, kāds būs kompilācijas rezultāts šādam kodam:
.primary-button {
background-color: #3272c7;
@at-root {
.block-button {
color: #ff0000;
}
.content-button {
color: #ccb42a;
}
}
.warning-button {
border: 2px solid #232523;
}
}