Zagnieżdżony import w SASS

Zwykle @import używa się na początku dokumentu, ale preprocesor SASS pozwala importować pliki w dowolne miejsca potrzebnego nam pliku, w tym także do wnętrza selektorów.

Rozważmy następujący przykład:

main.scss.active {
  color: blue;
}

Następnie zaimportujmy go do pliku style.scss:

style.scssdiv {
  @import "main";
}

Teraz spójrzmy na wynik kompilacji:

style.cssdiv .active {
  color: blue; 
}

navbar.scss.link {
  color: red;
  font-size: 12px;
}