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

  Nesse tutorial, aprenderemos como configurar executadores de tarefas e, no processo, também veremos um exemplo de buscar scripts dos pacotes do Bower para...

• Novo Curso Rápido: Configurando Fluxo de Desenvolvimento Front-End

  Configurar fluxo melhor e mais eficiente para front-end? Tentemos o novo curso, "Configurando Fluxo de Desenvolvimento Front-end. Aprenderemos...

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

• grunt-replace
• gulp-replace