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:

navbar.scss.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:

style.scss@import "navbar";

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

style.css.active {
  color: red; 
}

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