Importazione di file in SASS

Quando si lavora con file SASS, a volte è necessario spostare il codice da un documento .scss, ma senza creare un suo clone con estensione .css, cioè importarne un frammento.

Ad esempio, abbiamo un file navbar.scss con il seguente codice:

.active {
	color: red;
}

Per effettuare questo tipo di importazione, prima di tutto è necessario aggiungere un trattino basso prima del nome del file, in questo modo: _navbar.scss. Poi in un altro file style.scss scriviamo la direttiva @import, ma nel nome del file da importare non indichiamo il trattino basso, così come l'estensione del file:

@import "navbar";

E vediamo che durante la compilazione in style.css è stato importato il codice del file _navbar.scss:

.active {
	color: red; 
}

Crea un file main.scss con il seguente contenuto:

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

Poi importane il frammento nel file styles.scss e compilalo in styles.css.