Sass em CSS: Preservando Espaço em Branco na Compilação

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:

1	/******************************************************************************
2	*
3	* Partial.
4	*
5	*****************************************************************************/
6	body {
7	font-size: 100%;
8	}
9
10
11
12
13
14

Compilá-los sob circunstâncias normais daria algo assim:

1	/******************************************************************************
2	*
3	* Partial.
4	*
5	*****************************************************************************/
6	body {
7	font-size: 100%;
8	}
9
10	/******************************************************************************
11	*
12	* Partial.
13	*
14	*****************************************************************************/
15	body {
16	font-size: 100%;
17	}
18
19	/******************************************************************************
20	*
21	* Partial.
22	*
23	*****************************************************************************/
24	body {
25	font-size: 100%;
26	}

Mas, digamos que realmente queremos é algo assim:

1	/******************************************************************************
2	*
3	* Partial.
4	*
5	*****************************************************************************/
6	body {
7	font-size: 100%;
8	}
9
10
11
12
13
14
15	/******************************************************************************
16	*
17	* Partial.
18	*
19	*****************************************************************************/
20	body {
21	font-size: 100%;
22	}
23
24
25
26
27
28
29	/******************************************************************************
30	*
31	* Partial.
32	*
33	*****************************************************************************/
34	body {
35	font-size: 100%;
36	}
37
38
39
40
41
42

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...

Kezz Bracey
24 de Março de 2015

Terminal
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...

Andrew Blackman
02 de Março de 2017

Fluxo de Trabalho

Carregamos o grunt-replace junto de outras dependências no package.json, como no trecho abaixo:

1	"devDependencies": {
2	"grunt": "^1.0.1",
3	"grunt-replace": "^1.0.1",
4	"grunt-sass": "^2.0.0",
5	"load-grunt-tasks": "^3.5.2"
6	}

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:

1	match: '/**/',
2	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:

1	/******************************************************************************
2	*
3	* Partial.
4	*
5	*****************************************************************************/
6	body {
7	font-size: 100%;
8	}
9	/**/
10	/**/
11	/**/
12	/**/
13	/**/
14	/**/
15	/**/

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?