De @at-root richtlijn in SASS

De richtlijn @at-root is bedoeld om regels uit de bovenliggende selector te halen en naar de wortel (root) van het bestand te verplaatsen.

Laten we het volgende voorbeeld bekijken met selectors op het eerste genest niveau:

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

Na compilatie resulteert dit in de volgende code:

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

Laten we nu de werking bekijken van de richtlijn @at-root met meerdere selectors:

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

Na compilatie ziet de code er als volgt uit:

.main-parent {
	background-color: #fdd; 
}

.first-child {
	border: 1px solid; 
}

.second-child {
	font-weight: bold; 
}

.main-parent .step-child {
	color: #232523; 
}

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

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