Bestanden importeren in SASS

Bij het werken met SASS-bestanden is het soms nodig om code uit een .scss document te verplaatsen, maar zonder een kloon ervan te maken met de extensie .css, d.w.z. een fragment ervan te importeren.

Stel, we hebben een bestand navbar.scss met de volgende code:

.active {
	color: red;
}

Om dit type import uit te voeren, moet je eerst een underscore toevoegen voor de bestandsnaam, zoals dit: _navbar.scss. Vervolgens schrijven we in een ander bestand style.scss de directive @import, maar in de naam van het te importeren bestand geven we de underscore, net als de bestandsextensie, niet op:

@import "navbar";

En we zien dat bij het compileren naar style.css de code van het bestand _navbar.scss is geïmporteerd:

.active {
	color: red; 
}

Maak een bestand main.scss aan met de volgende inhoud:

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

Importeer vervolgens een fragment ervan in het bestand styles.scss en compileer het naar styles.css.