Importação de arquivos em SASS

Ao trabalhar com arquivos SASS, às vezes é necessário transferir código de um documento .scss, mas sem criar um clone dele com a extensão .css, ou seja, importar um fragmento dele.

Por exemplo, temos um arquivo navbar.scss com o seguinte código:

.active {
	color: red;
}

Para realizar este tipo de importação, primeiro é necessário adicionar um sublinhado antes do nome do arquivo, assim: _navbar.scss. Em seguida, em outro arquivo style.scss, escrevemos a diretiva @import, mas no nome do arquivo a ser importado, o sublinhado, assim como a extensão do arquivo, não são especificados:

@import "navbar";

E vemos que, ao compilar para style.css, o código do arquivo _navbar.scss foi importado:

.active {
	color: red; 
}

Crie um arquivo main.scss com o seguinte conteúdo:

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

Em seguida, importe seu fragmento para o arquivo styles.scss e compile para styles.css.