Sass em CSS: Preservando Espaço em Branco na Compilação
() 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:
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:
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?