Organizando Arquivos Sass para Projetos Escaláveis
À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:
- 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; - Criamos diferentes pastas para os parciais do sass. (por exemplo, a pasta
utilitiespara variáveis, a pastacomponentspara estilos repetidos de alguns elementos, a pastabasepara estilos globais e redefinição do comportamento padrão dos elementos, e a pastalayoutspara 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.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you explain what a Sass partial is and why the filename starts with an underscore?
How does the folder structure help in organizing large Sass projects?
Can you show an example of how to use variables from one partial in another?
Awesome!
Completion rate improved to 2.04Organizando Arquivos Sass para Projetos Escaláveis
Deslize para mostrar o menu
À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:
- 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; - Criamos diferentes pastas para os parciais do sass. (por exemplo, a pasta
utilitiespara variáveis, a pastacomponentspara estilos repetidos de alguns elementos, a pastabasepara estilos globais e redefinição do comportamento padrão dos elementos, e a pastalayoutspara 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.
Obrigado pelo seu feedback!
