Advertisement
  1. Web Design
  2. Sass

De Sass a CSS: Cómo Preservar Espacio en Blanco en la Compilación

by
Read Time:3 minsLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

¿Siempre quisiste mantener la estructura visual de tus archivos Sass, cuando compilas a CSS, sin perder ningún espacio en blanco? ¡En éste consejo rápido voy a mostrarte cómo!

Observa el Consejo Rápido

Éste consejo rápido es para los que necesitan compilar Sass a una forma "expandida". Si compilas a una forma "comprimida" o "minificada" entonces toda la cuestión de que esté ahí el espacio en blanco es irrelevante.

El Problema

Imagina que tienes varios partials (archivos parciales) de Sass que se les aplicó éste formato, incluyendo los saltos de línea vacíos en la parte inferior:

Compilarlos en circunstancias normales te daría algo así:

Pero digamos que realmente quieres lo siguiente:

La Solución

Vamos a resolver las cosas usando un plugin de Grunt llamado grunt-replace. Para los detalles sobre cómo instalarlo con Grunt, consulta los siguientes recursos:

Cargamos grunt-replace, junto con algunas otras dependencias, en nuestro archivo package.json como se muestra en el siguiente snippet:

Luego, en nuestro archivo grunt.js tenemos que implementar la tarea:

Buscar Coincidencia

Aplicamos la tarea de reemplazo después de que hemos compilado nuestro archivo Sass (verifica los archivos fuente para más detalles).

Nota que la opción patterns, la cual muestra lo siguiente:

Ésto instruye a Grunt a recorrer el archivo compilado, encontrar las instancias de /**/ y reemplazarlas con un string vacío. Ahora todo lo que necesitamos hacer es recorrer nuestros archivos parciales de Sass, colocar éstos comentarios /**/ donde queremos el espacio en blanco, y dejar que Grunt haga el resto:

Conclusión

Grunt-replace es una tarea realmente útil para encontrar strings comunes y reemplazarlos con algo más, cuando ejecutes Grunt. En éste caso es la herramienta perfecta para evitar eliminar el espacio en blanco de nuestro Sass compilado. ¿Para que más lo usarías?

Recursos Útiles

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.