Si hoy en día te dedicas al desarrollo web hay dos cosas que debes añadir en tu workflow: preprocesadores CSS y LiveReload.

Prepros es un programa multiplataforma que nos permite hacer ambas cosas. Voy primero a explicar en qué consisten y luego os explico su uso.

Preprocesadores

El lenguaje CSS tiene algunas limitaciones. Hoy por hoy, están claramente en auge lenguajes que se sitúan un paso antes de éste, los preprocesadores. Consisten, básicamente, en un lenguaje muy parecido al CSS (en general) que debe ser compilado. Es decir, en lugar de escribir en CSS, se escribe en otro lenguaje y luego, por medio de algunos programas, se interpreta ese lenguaje y se convierte en CSS standard.

Los lenguajes más populares son LessSass y, como tercero en discordia, Stylus. Estos lenguajes nos permitirán usar variables, funciones, mixins y otras ventajas. Las posibilidades son enormes:

  • definir un color para todo un sitio y usar funciones para obtener otras tonalidades de ese mismo color
  • no tener que escribir los prefijos propietarios (eso gracias a los mixins)
  • modularizar y anidar el código
  • hacer cálculos de medidas: ejemplo de cómo definir el ancho de un sitio usando Less y rem
  • y un largo etcétera, el límite es la imaginación

Iré hablando de los preprocesadores en posteriores artículos.

LiveReload

Digamos que estás haciendo un sitio, estás editando css, html y a la vez tienes un navegador abierto para revisar el resultado. Escribes un archivo, guardas, cambias a la ventana del navegador y recargas el sitio, ¿verdad? Pues eso ya no es necesario. Usando LiveReload, al hacer algún cambio en tu css o html y guardarlo, el navegador se refresca automáticamente.

Esta característica tan útil se puede lograr de otras maneras. Por ejemplo, el editor Brackets también la ofrece.

Prepros

Como he dicho al principio, Prepros, entre sus características, cuenta con las dos anteriores.

prepros ventana

En ‘Projects’ (a la izquierda), agregaremos las carpetas con los archivos. Desde las opciones de cada proyecto podremos definir muchas variables. Por poner un ejemplo, podemos hacer que además de que se procese el css, se minifique (comprima). En la imagen de arriba veis tamboién destacada la opción de LiveReload (Live Preview).

En fin, no pretendo explicar todas las opciones del programa, simplemente recomendaros que lo probéis.

Prepros tiene un coste de 29$ pero se puede usar en modo trial. Sin embargo, todas las opciones están disponibles, es funcional al 100%, simplemente aparece esporádicamente un popup invitando a su compra (cosa que recomiendo si le dais uso regular).

Añade preprocesadores CSS y LiveReload a tu flujo de trabajo con Prepros

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *