Importation imbriquée dans SASS

Habituellement, @import est utilisé au début du document, mais le préprocesseur SASS permet d'importer des fichiers dans n'importe quelle partie de notre fichier, y compris à l'intérieur des sélecteurs.

Examinons l'exemple suivant :

main.scss.active {
  color: blue;
}

Ensuite, importons-le dans le fichier style.scss :

style.scssdiv {
  @import "main";
}

Regardons maintenant le résultat de la compilation :

style.cssdiv .active {
  color: blue; 
}

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