Importação Aninhada no SASS
Geralmente, @import é usado no início de um documento,
mas o pré-processador SASS permite importar arquivos
em qualquer parte do arquivo que precisamos, inclusive
dentro de seletores.
Vamos considerar o seguinte exemplo:
.active {
color: blue;
}
Em seguida, vamos importá-lo para o arquivo style.scss:
div {
@import "main";
}
Agora, vamos ver o resultado da compilação:
div .active {
color: blue;
}
Crie um arquivo navbar.scss
com o seguinte conteúdo:
.link {
color: red;
font-size: 12px;
}
Em seguida, importe este fragmento para dentro do
bloco #main do arquivo
styles.scss e execute a compilação
para styles.css.