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:

main.scss.active {
  color: blue;
}

Em seguida, vamos importá-lo para o arquivo style.scss:

style.scssdiv {
  @import "main";
}

Agora, vamos ver o resultado da compilação:

style.cssdiv .active {
  color: blue; 
}

Задание 1

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

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