Verschachteltes Importieren in SASS

Normalerweise wird @import am Anfang eines Dokuments verwendet, aber der Präprozessor SASS erlaubt es, Dateien in beliebigen Teilen unserer Zieldatei zu importieren, einschließlich innerhalb von Selektoren.

Betrachten wir das folgende Beispiel:

main.scss.active {
  color: blue;
}

Als nächstes importieren wir es in die Datei style.scss:

style.scssdiv {
  @import "main";
}

Sehen wir uns nun das Ergebnis der Kompilierung an:

style.cssdiv .active {
  color: blue; 
}

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