[HTML|JS|CSS] Sass : Nesting

W CSS 3, jeżeli chcemy nadać pewien styl tylko elementom zagnieżdżonym w innych elementach, musimy podawać dla każdej kontrolki wewnętrznej selektor rodzica oraz jej selektor. Kod taki można uprościć dzięki zastosowaniu zagnieżdżania w Sass. Wystarczy napisać styl dla elementu zewnętrznego, a w nim umieszczać style dla elementów wewnętrznych. Przykładowo, jeśli chcemy, aby wszystkie divy w elementach zawierających klasę .padded-div, miały określony padding, możemy napisać:

.padded-div
{
 font-family: Arial, "MS Trebuchet", sans-serif;
 /*inne wlasciwosci klasy padded-div */
 div
 {
  padding: 20px 0px 40px 0px;
 }
}

Po transformacji:

.padded-div {
  font-family: Arial, "MS Trebuchet", sans-serif;
  /*inne wlasciwosci klasy padded-div */ }
  .padded-div div {
    padding: 20px 0px 40px 0px; }

Warto zauważyć, że Sass po transformacji nadaje wcięcie, co poprawia czytelność arkusza styli.

Zagnieżdżanie możemy się odbywać na kolejnych poziomach, wszystko zależy od potrzeb programisty.