Importarea fișierelor în SASS

În lucrul cu fișierele SASS uneori este necesar să transferăm codul dintr-un document .scss, dar fără a crea un clon al acestuia cu extensia .css, adică să importăm un fragment din acesta.

De exemplu, avem fișierul navbar.scss cu următorul cod:

navbar.scss.active {
  color: red;
}

Pentru a realiza acest tip de import mai întâi trebuie să adăugăm o liniuță de subliniere înaintea numelui fișierului, astfel: _navbar.scss. Apoi, în alt fișier style.scss scriem directiva @import, dar în numele fișierului importat liniuța de subliniere, la fel ca și extensia fișierului, nu le indicăm:

style.scss@import "navbar";

Și vedem că la compilarea în style.css s-a importat codul din fișierul _navbar.scss:

style.css.active {
  color: red; 
}

main.scss.block-content {
  padding: 10px;
  margin-left: auto;
  width: 600px;
  font-size: 14px;
}