Advertisement
  1. Web Design
  2. Sass

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

by
Read Time:3 minsLanguages:

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:

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

Mas, digamos que realmente queremos é algo assim:

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:

Entäao, no grunt.js, implementamos a tarefa:

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:

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:

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