Às vezes, é desafiador escrever todo o código em um único arquivo. O Sass permite dividir o código em diferentes arquivos e pastas. Isso simplifica a manutenção e a refatoração do código.

pasta sass

A primeira tarefa é criar a pasta sass na raiz do projeto. Dessa forma, informamos ao compilador que utilizamos sass no projeto.

organização da pasta sass

Na pasta sass:

1. Criamos o arquivo main.scss. Ele é o arquivo principal para o compilador. Conectamos todos os fragmentos a este arquivo com a ajuda da diretiva @import;
2. Criamos diferentes pastas para os parciais do sass. (por exemplo, a pasta utilities para variáveis, a pasta components para estilos repetidos de alguns elementos, a pasta base para estilos globais e redefinição do comportamento padrão dos elementos, e a pasta layouts para estilos não repetidos).

parciais

Agora, estamos prontos para adicionar arquivos e escrever algum código sass para aplicar estilos aos elementos. Para manter a estrutura, criamos um arquivo para cada funcionalidade. O nome do arquivo deve começar com o sublinhado (_). Para o compilador, isso significa que não é o arquivo principal. É um parcial.

Toda a estrutura está pronta. Podemos importar todos os arquivos para o arquivo main.scss com a ajuda da diretiva @import. A ordem é essencial. Por exemplo, se quisermos usar algumas variáveis do arquivo _variables.scss no arquivo _button.scss, então precisamos manter a importação do arquivo _variables.scss acima da importação do arquivo _button.scss dentro do arquivo main.scss.

A sintaxe para importar o arquivo é a seguinte. Usamos @import e aspas duplas ("") para especificar o caminho correto para o arquivo.

@import "path";

O conteúdo resultante no arquivo main.scss é o seguinte:

@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";

Nota

Consideramos os conceitos básicos do pré-processador Sass que nos permitem utilizá-lo em projetos. No entanto, qualquer pré-processador possui uma grande variedade de recursos diferentes. Abranger todos eles foge ao escopo deste curso.