A maneira inteligente e produtiva de desenvolver CSS-Cascading Style Sheets- é usando pré-compiladores vamos implementar uma organização de arquivo em SASS.
Nós necessitamos monitorar todos os arquivos que estão na pastas SASS, porém nem todos deve ser gera um arquivo css equivalente ao sass.
Por exemplo: Temos uma pasta SASS que possui cinco arquivos: style.scss; _menu.scss; _header.scss; _variable.scss; _produtos.scss.
No exemplo acima necessitamos a geração do arquivos style.css. Então o comando que realiza o monitoramento de arquivo é
sass – -watch scss:css
A pasta monitorada só vai gerar o style.css os demais arquivos são ignorados para construção de .css devido a utilização do underline ou underscore ( _) no inicio do nome do arquivo.
É fundamental a utilização desde artifício presente no monitoramento do sass pois desse modo, aproveitamentos a separação de código otimizada.
Então os arquivos _menu.scss; _header.scss; _variable.scss e _produtos.scss. Serão utilizados dentro do style.scss.
style.scss
@import “variable”;
@import “menu”;
@import “header”;
@import “produtos”;
Conforme demostrado os arquivos ficam centralizados em um único arquivo style.css. Para o browser é fundamental ter um único arquivo e compactado ou minificado. Já para o desenvolver é melhor a divisão de códigos para reaproveitamento e manutenção do sistema de forma organizada.
Sugestão 1: No final de todo o procedimento dos códigos realize a compactação dos arquivos. $ sass – – watch scss:css – – style compressed
Sugestão 2: Você pode dividir seus arquivos por cada arquivo HTML ou por seções do documento se o mesmo for grande.