Zoeken…
Eenvoudig nestelen
Wanneer u een nieuwe regel binnen een andere regel declareert, wordt deze nesting genoemd. Met standaard nesten, zoals hieronder getoond, zal de geneste selector worden gecompileerd als een nieuwe CSS-selector met al zijn ouders erop, gescheiden door een spatie.
// SCSS
.parent {
margin: 1rem;
.child {
float: left;
}
}
// CSS output
.parent {
margin: 1rem;
}
.parent .child {
float: left;
}
Nesteldiepte
Nesten is een zeer krachtige functie, maar moet met voorzichtigheid worden gebruikt. Het kan vrij gemakkelijk en snel gebeuren, dat je begint te nestelen en alle kinderen in een nest, van een nest, van een nest gaat opnemen. Laat me demonstreren:
// SCSS
header {
// [css-rules]
.holder {
// [css-rules]
.dropdown-list {
// [css-rules]
ul {
// [css-rules]
li {
margin: 1rem 0 0 1rem;
}
}
}
}
}
// CSS output of the last rule
header .holder .dropdown-list ul li {
margin: 1rem 0 0 1rem;
}
Problemen
specificiteit
De li uit het bovenstaande voorbeeld heeft een margin ingesteld. Laten we zeggen dat we dit later in een mediaquery willen overschrijven.
@media (max-width: 480) {
// will not work
.dropdown-list ul li {
margin: 0;
}
// will work
header .holder .dropdown-list ul li {
margin: 0;
}
}
Dus door te diep te nestelen, moet je dus opnieuw diep nestelen wanneer je een bepaalde waarde wilt overschrijven. Erger nog, dit is vaak waar de regel !important komt om te gebruiken.
@media (max-width: 480) {
// BIG NO-NO, don't do this
.dropdown-list ul li {
margin: 0 !important;
}
Waarom is de !important -regel een slecht idee?
Je moet je SCSS zo schrijven dat deze oplossingen in de eerste plaats niet eens nodig zijn. Het gebruik van !important voor zo'n klein probleem zal je al door een konijnenhol leiden!
herbruikbaarheid
Dit is redelijk vergelijkbaar met het specificiteitsprobleem, maar het is de moeite waard om apart te vermelden. Als u zoiets als een knop of zelfs een vervolgkeuzelijst opmaakt, wilt u die stijlen misschien ergens anders op uw pagina hergebruiken.
Door te diep te nestelen, zijn je stijlen alleen gebonden aan de elementen die in de buitenste ouder zitten (het element bovenaan je SCSS). Dit leidt u naar stijlen kopiëren en ze ergens anders opnieuw plakken. Mogelijk in een andere geneste regel.
Je stylesheets worden steeds groter en moeilijker te onderhouden.
Hoe diep moet je nestelen?
De meeste styleguides stellen de maximale diepte in op 2. Dit is in het algemeen een goed advies, want er zijn maar heel weinig gelegenheden waar je dieper wilt nestelen. Meestal is 2 voldoende.
Nesten met @ at-root
Nesting wordt waarschijnlijk meestal gebruikt om meer specifieke selectors te maken, maar het kan ook eenvoudig worden gebruikt voor het organiseren van codes. Met behulp van de @at-root richtlijn kun je 'springen' waar je hem in je Sass nestelt en je terugbrengen naar het hoogste niveau. Als je dit doet, kun je stijlen gegroepeerd houden zonder meer specificiteit te creëren dan je nodig hebt.
U kunt bijvoorbeeld zoiets doen:
.item {
color: #333;
@at-root {
.item-wrapper {
color: #666;
img {
width: 100%;
}
}
}
.item-child {
background-color: #555;
}
}
Dat zou hierop aansluiten:
.item {
color: #333;
}
.item-wrapper {
color: #666;
}
.item-wrapper img {
width: 100%;
}
.item .item-child {
background-color: #555;
}
Door dit te doen, zijn al onze stijlen met betrekking tot de .item klasse samen in de SCSS, maar we hebben die klasse niet noodzakelijkerwijs in elke selector nodig.
Contexten uitsluiten
Standaard worden declaraties binnen @at-root in elke context weergegeven. Dit betekent dat er bijvoorbeeld regels in een @media blok blijven staan.
@media print {
.item-wrapper {
@at-root {
.item {
background: white;
}
}
}
}
// Will compile to
@media print {
.item {
background: white;
}
}
Dit is niet altijd gewenst gedrag, dus u kunt de mediacontext uitsluiten door media door te geven aan de without optie van de @at-root richtlijn.
@at-root (without: media) {..
Zie de officiële documentatie voor meer informatie
De bovenliggende selector (&)
Nesten is geweldig om gerelateerde selectors bij elkaar te houden, zodat toekomstige ontwikkelaars uw code gemakkelijker kunnen begrijpen. De bovenliggende selector, vertegenwoordigd door een en-teken ("&") kan dat helpen in complexere situaties. Er zijn verschillende manieren om het te gebruiken.
Maak een nieuwe selector die zowel de bovenliggende selector als een andere op hetzelfde element vereist door de nieuwe selector direct achter een bovenliggende selector te plaatsen.
// SCSS
.parent {
&.skin {
background: pink;
}
}
// CSS output
.parent.skin {
background: pink;
}
Laat de bovenliggende na een geneste selector in de gecompileerde CSS verschijnen door de bovenliggende selector achter de geneste selector te plaatsen.
// SCSS
.parent {
.wrapper & {
border: 1px solid black;
}
}
// CSS output
.wrapper .parent {
border: 1px solid black;
}
Staten en pseudo-elementen
Naast het gebruik van nesten voor klassen en kinderen, wordt nesten met de bovenliggende selector ook vaak gebruikt om de toestanden van :active :hover en :focus voor koppelingen te combineren.
// SCSS
a {
color: blue;
&:active,
&:focus {
color: red;
}
&:visited {
color: purple;
}
}
// CSS output
a {
color: blue;
}
a:active,
a:focus {
color: red;
}
a:visited {
color: purple;
}
Op dezelfde manier kunt u pseudo-elementen opmaken door te nestelen met de bovenliggende selector.
// SCSS
.parent {
&::after {
display: table;
clear: both;
content: '';
}
&::only-child {
font-weight: bold;
}
}
// CSS output
.parent::after {
display: table;
clear: both;
content: '';
}
.parent::only-child {
font-weight: bold;
}
Nesten eigenschappen
Sommige CSS-eigenschappen behoren tot een namespace, bijvoorbeeld border-right behoort tot de border namespace. Om minder te schrijven, kunnen we het nesten van eigenschappen gebruiken en deze voorvoegsels overslaan, zelfs op meerdere niveaus.
Als we een rand rechts en links van een klasse met de naam .borders moeten maken, kunnen we dit schrijven:
//SCSS
.borders {
border: 2px dashed blue;
border: {
left: 1px solid black;
right: 1px solid red;
}
}
// CSS output
.borders {
border: 2px dashed blue;
border-left: 1px solid black;
border-right: 1px solid red;
}
Dit bespaart ons dat we border-right en border-left , maar we schrijven nog steeds repetitieve code met de regels 1px solid black en 1px solid red . We kunnen nog minder repetitieve CSS schrijven met het volgende:
// SCSS
.borders {
border: 2px dashed blue {
left: 1px solid black;
right: {
color: red;
}
}
}
// CSS output
.borders {
border: 2px dashed blue;
border-left: 1px solid black;
border-right-color: red;
}