Import imbricat în SASS

De obicei @import este folosit la începutul documentului, dar preprocesorul SASS permite importarea fișierelor în orice parte a fișierului nostru, inclusiv în interiorul selectorilor.

Să luăm în considerare următorul exemplu:

main.scss.active {
  color: blue;
}

Apoi îl importăm în fișierul style.scss:

style.scssdiv {
  @import "main";
}

Acum să ne uităm la rezultatul compilării:

style.cssdiv .active {
  color: blue; 
}

Задание 1

Creați un fișier navbar.scss cu următorul conținut:

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

Apoi importați acest fragment în blocul #main al fișierului styles.scss și efectuați compilarea în styles.css.