Advertisement
  1. Web Design
  2. Sass

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

Scroll to top
Read Time: 3 min

() translation by (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:

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:

1
        // Task: replace.

2
        replace: {
3
            css: {
4
                options: {
5
                    usePrefix: false,
6
                    patterns: [
7
                        {
8
                            match: '/**/',
9
                            replacement: ''
10
                        }
11
                    ]
12
                },
13
                files: [
14
                    {
15
                        'css/styles.css': 'css/styles.css' // for single file

16
                    }
17
                ]
18
            }
19
        }

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?

Recursos Úteis

Advertisement
Did you find this post useful?
Want a weekly email summary?
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.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.