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
