Fájlok importálása SASS-ban

A SASS fájlokkal való munka során gyakran szükséges kódot áthelyezni egy .scss dokumentumból, anélkül, hogy létrehoznánk annak .css kiterjesztésű klónját, azaz egy fragmentumát importálni.

Például van egy navbar.scss fájlunk a következő kóddal:

navbar.scss.active {
  color: red;
}

Ahhoz, hogy egy ilyen típusú importot hajthassunk végre, először egy aláhúrást kell hozzáadnunk a fájlnév elé, így: _navbar.scss. Majd egy másik style.scss fájlba felvesszük a @import direktívát, de az importálandó fájl nevében az aláhúzást, akárcsak a fájl kiterjesztését nem tüntetjük fel:

style.scss@import "navbar";

És látjuk, hogy a fordítás után a style.css fájlban megjelent a _navbar.scss fájl kódja:

style.css.active {
  color: red; 
}

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