SASS-valitsinten yhdistäminen
Joskus tarvitsemme, että sisäkkäisten rakenteiden kääntymisen yhteydessä ne yhdistyvät ei välilyönnin kautta, vaan yhtenäisesti. Tätä varten on asetettava et-merkki sisäkkäisen valitsimen nimen eteen:
div {
&.block {
width: 300px;
}
}
Lopputuloksena kääntämisen jälkeen saamme seuraavan koodin:
div.block {
width: 300px;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
#block {
&.xxx {
width: 300px;
}
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
#block {
.xxx {
width: 300px;
}
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}
