Beágyazott import SASS-ban

Általában a @import-ot a dokumentum elején használják, de az SASS előfeldolgozó lehetővé teszi a fájlok importálását a kívánt fájl bármely részébe, beleértve a szelektorok belsejébe is.

Vizsgáljuk meg a következő példát:

main.scss.active {
  color: blue;
}

Ezután importáljuk be a style.scss fájlba:

style.scssdiv {
  @import "main";
}

Most nézzük meg a fordítás eredményét:

style.cssdiv .active {
  color: blue; 
}

Задание 1

Hozzon létre egy navbar.scss fájlt a következő tartalommal:

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

Ezután importálja ezt a fragmentumot a #main blokkba a styles.scss fájlban, és végezze el a fordítást a styles.css fájlba.