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:
1 |
/******************************************************************************
|
2 |
*
|
3 |
* Partial.
|
4 |
*
|
5 |
*****************************************************************************/
|
6 |
body { |
7 |
font-size: 100%; |
8 |
}
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
Compilarlos en circunstancias normales te daría algo así:
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 |
}
|
Pero digamos que realmente quieres lo siguiente:
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 |
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:
La Línea de Comandos para Diseño Web: Automatización con Grunt
Nuevo Curso Breve: Configurando un Flujo deTrabajo de Desarrollo Front-End Profesional
Cargamos grunt-replace, junto con algunas otras dependencias, en nuestro archivo package.json como se muestra en el siguiente snippet:
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 |
}
|
Luego, en nuestro archivo grunt.js tenemos que implementar la tarea:
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 |
}
|
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:
1 |
match: '/**/', |
2 |
replacement: '' |
É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:
1 |
/******************************************************************************
|
2 |
*
|
3 |
* Partial.
|
4 |
*
|
5 |
*****************************************************************************/
|
6 |
body { |
7 |
font-size: 100%; |
8 |
}
|
9 |
/**/
|
10 |
/**/
|
11 |
/**/
|
12 |
/**/
|
13 |
/**/
|
14 |
/**/
|
15 |
/**/
|
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
By
