Importación de archivos en SASS

Al trabajar con archivos SASS, a veces es necesario transferir código desde un documento .scss, pero sin crear un clon del mismo con la extensión .css, es decir, importar un fragmento del mismo.

Por ejemplo, tenemos un archivo navbar.scss con el siguiente código:

.active {
	color: red;
}

Para realizar este tipo de importación, primero debemos agregar un guión bajo antes del nombre del archivo, así: _navbar.scss. Luego, en otro archivo style.scss escribimos la directiva @import, pero en el nombre del archivo a importar no indicamos el guión bajo ni la extensión del archivo:

@import "navbar";

Y vemos que al compilar en style.css se importó el código del archivo _navbar.scss:

.active {
	color: red; 
}

Cree un archivo main.scss con el siguiente contenido:

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

Luego importe su fragmento en el archivo styles.scss y compílelo en styles.css.