Import Annidato in SASS

Di solito @import viene utilizzato all'inizio del documento, ma il preprocessore SASS consente di importare file in qualsiasi parte del file che ci serve, incluso all'interno dei selettori.

Consideriamo il seguente esempio:

main.scss.active {
  color: blue;
}

Ora importiamolo nel file style.scss:

style.scssdiv {
  @import "main";
}

Ora diamo un'occhiata al risultato della compilazione:

style.cssdiv .active {
  color: blue; 
}

Задание 1

Crea un file navbar.scss con il seguente contenuto:

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

Quindi importa questo frammento nel blocco #main del file styles.scss ed esegui la compilazione in styles.css.