Importowanie plików w SASS

Podczas pracy z plikami SASS często zachodzi potrzeba przeniesienia kodu z dokumentu .scss, ale bez tworzenia jego klona z rozszerzeniem .css, czyli zaimportowania jego fragmentu.

Na przykład, mamy plik navbar.scss z następującym kodem:

navbar.scss.active {
  color: red;
}

Aby wykonać tego rodzaju import, najpierw należy dodać podkreślenie przed nazwą pliku, w ten sposób: _navbar.scss. Następnie w innym pliku style.scss zapisujemy dyrektywę @import, ale w nazwie importowanego pliku podkreślenia, jak i rozszerzenia pliku nie podajemy:

style.scss@import "navbar";

I widzimy, że po kompilacji do style.css zaimportował się kod pliku _navbar.scss:

style.css.active {
  color: red; 
}

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