Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
Manter a estrutura visual dos arquivos Sass, ao compilá-los em CSS, sem perder espaço em branco? Nessa dica rápida mostraremos que é possível!
Assistir Dica Rápida
Essa dica rápida é para quem precisa compilar Sass de forma "expandida". Se compilarmos de forma "comprimida" ou "minificada", a falta de espaço em branco se torna irrelevante.
O Problema
Imaginemos ter várias parciais de Sass formatadas assim, inclindo as linhas em branco no final:
/****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; }
Compilá-los sob circunstâncias normais daria algo assim:
/****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; } /****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; } /****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; }
Mas, digamos que realmente queremos é algo assim:
/****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; } /****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; } /****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; }
A Solução
Resolveremos isso usando um plugin do Grunt chamado grunt-replace. Para mais detalhes sobre como lidar com Grunt, vejamos esses recursos:
Linha de Comando para Desenvolvimento Web: Automações com o Grunt
Novo Curso Rápido: Configurando Fluxo de Desenvolvimento Front-End
Carregamos o grunt-replace junto de outras dependências no package.json, como no trecho abaixo:
"devDependencies": { "grunt": "^1.0.1", "grunt-replace": "^1.0.1", "grunt-sass": "^2.0.0", "load-grunt-tasks": "^3.5.2" }
Entäao, no grunt.js, implementamos a tarefa:
// Task: replace. replace: { css: { options: { usePrefix: false, patterns: [ { match: '/**/', replacement: '' } ] }, files: [ { 'css/styles.css': 'css/styles.css' // for single file } ] } }
Combinar
Aplicamos a tarefa replace após completarmos o arquivo Sass (vejamos os fontes para mais detalhes).
Notemos a opção patterns
, que mostra o seguinte:
match: '/**/', replacement: ''
Isso instrui o Grunt a ir pelo arquivo compilado, encontrar todos /**/
e substituí-los por espaços em branco. Agora, tudo que precisamos fazer é ir por nossas parciais Sass, colocar /**/
onde queremos espaços em branco e o Grunt fará o resto:
/****************************************************************************** * * Partial. * *****************************************************************************/ body { font-size: 100%; } /**/ /**/ /**/ /**/ /**/ /**/ /**/
Conclusão
Grunt-replace é uma tarefa útil ao procurar por textos simples para substituí-los por algo diferente sempre que executamos Grunt. Nesse caso, é a ferramenta perfeita para evitar que o espaço em branco seja removido do Sass compilado. O que mais poderíamos usar para conseguir isso?
Recursos Úteis
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post