Accentsconagua
Share
¿Alguna vez quiso mantener la estructura visual de sus archivos Sass, cuando compila en CSS, sin perder nada del espacio en blanco? En este rápido consejo te voy a mostrar cómo!
Este consejo rápido es para aquellos de ustedes que necesitan compilar Sass a un formato "expandido". Si compila a "comprimido" o "minimizado", toda la cuestión de que haya espacios en blanco es irrelevante.
Imagina que tienes varios parciales de Sass con este formato, incluidos los saltos de línea vacíos en la parte inferior:
/ ************************************************** ***************************** * * Parcial. * ************************************************** **************************** / body font-size: 100%;
Compilarlos en circunstancias normales le daría algo como:
/ ************************************************** ***************************** * * Parcial. * ************************************************** **************************** / body font-size: 100%; / ************************************************ ****************************** * * Parcial. * ************************************************** **************************** / body font-size: 100%; / ************************************************ ****************************** * * Parcial. * ************************************************** **************************** / body font-size: 100%;
Pero digamos que realmente quieres lo siguiente:
/ ************************************************** ***************************** * * Parcial. * ************************************************** **************************** / body font-size: 100%; / ************************************************ ****************************** * * Parcial. * ************************************************** **************************** / body font-size: 100%; / ************************************************ ****************************** * * Parcial. * ************************************************** **************************** / body font-size: 100%;
Vamos a resolver las cosas usando un complemento Grunt llamado grunt-replace. Para obtener detalles sobre cómo ponerse en marcha con Grunt, eche un vistazo a los siguientes recursos:
Cargamos grunt-replace, junto con algunas otras dependencias, en nuestro archivo package.json como se muestra en el siguiente fragmento de código:
"devDependencies": "grunt": "^ 1.0.1", "grunt-replace": "^ 1.0.1", "grunt-sass": "^ 2.0.0", "load-grunt-tasks": "^ 3.5.2"
Luego, en nuestro archivo grunt.js tenemos que implementar la tarea:
// Tarea: reemplazar. Reemplace: css: opciones: usePrefix: falso, patrones: [coincidencia: '/ ** /', reemplazo: "], archivos: ['css / styles.css': 'css / styles. css '// para un solo archivo]
Aplicamos la tarea de reemplazo. después hemos compilado nuestro archivo Sass (revisa los archivos fuente para más detalles).
Observe la patrones Opción, que muestra lo siguiente:
partido: '/ ** /', reemplazo: "
Esto le indica a Grunt que pase por el archivo compilado, encuentre instancias de / ** / y reemplazarlos cada uno con una cadena vacía. Ahora todo lo que tenemos que hacer es revisar nuestros parciales de Sass, colocar estos / ** / comenta donde sea que realmente queramos espacios en blanco, y deja que Grunt haga el resto:
/ ************************************************** ***************************** * * Parcial. * ************************************************** **************************** / body font-size: 100%; / ** / / ** / / ** / / ** / / ** / / ** / / ** /
Grunt-replace es una tarea realmente útil para encontrar cadenas comunes y reemplazarlas con otra cosa, siempre que ejecutes Grunt. En este caso, es la herramienta perfecta para evitar que los espacios en blanco se eliminen de nuestro Sass compilado. ¿Para qué más lo usarías??
