Importación anidada en SASS

Normalmente @import se usa al principio del documento, pero el preprocesador SASS permite importar archivos en cualquier parte del archivo que necesitemos, incluso dentro de selectores.

Consideremos el siguiente ejemplo:

main.scss.active {
  color: blue;
}

A continuación, importémoslo al archivo style.scss:

style.scssdiv {
  @import "main";
}

Ahora veamos el resultado de la compilación:

style.cssdiv .active {
  color: blue; 
}

Задание 1

Crea un archivo navbar.scss con el siguiente contenido:

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

Luego importa este fragmento en el bloque #main del archivo styles.scss y realiza la compilación a styles.css.