Los preprocesadores de CSS se están convirtiendo cada vez más en un pilar del flujo de trabajo de los desarrolladores web front-end. CSS es un lenguaje increíblemente complicado y matizado, y en un esfuerzo por facilitar su uso, los desarrolladores a menudo recurren al uso de preprocesadores como SASS o LESS.
Los preprocesadores de CSS compilan el código que se escribe utilizando un compilador especial. Luego lo usan para crear un archivo CSS, que luego puede ser referenciado por el documento HTML principal.
Cuando utilice cualquier preprocesador de CSS, podrá programar en CSS normal tal como lo haría si el preprocesador no estuviera en su lugar. Lo bueno es que también tienes más opciones disponibles. Algunos, como SASS, tienen estándares de estilo específicos que están destinados a facilitar aún más la redacción del documento, como la libertad de omitir llaves si lo desea.
Por supuesto, los preprocesadores CSS también ofrecen otras características. Muchas de las características que se ofrecen son increíblemente similares en todos los preprocesadores, con solo ligeras variaciones en la sintaxis. Por lo tanto, puede elegir prácticamente cualquiera que desee y podrá lograr las mismas cosas. Algunas de las funciones más útiles son:
Variables
Uno de los elementos más utilizados en cualquier lenguaje de programación es la variable, algo de lo que CSS carece notablemente. Al tener variables a su disposición, puede definir un valor una vez y reutilizarlo a lo largo de todo el programa. Un ejemplo de esto en SASS sería:
$yourcolor: #000056 .yourDiv { color: $yourcolor; }Al declarar la SASS yourcolorvariable una vez, ahora es posible reutilizar este mismo color exacto en todo el documento sin tener que volver a escribir la definición.
Bucles
Otro elemento común en los lenguajes son los bucles, algo más de lo que carece CSS. Los bucles se pueden utilizar para repetir las mismas instrucciones varias veces sin tener que volver a ingresar varias veces. Un ejemplo con SASS sería:
@for $vfoo 35px to 85px { .margin-#{vfoo} { margin: $vfoo 10px; } }Este bucle nos ahorra tener que escribir el mismo código varias veces para cambiar el tamaño del margen.
Declaraciones If / Else
Otra característica más de la que CSS carece son las declaraciones If / Else. Estos ejecutarán un conjunto de instrucciones solo si una condición determinada es verdadera. Un ejemplo de esto en SASS sería:
@if width(body) > 500px { background color: blue; } else { background color: white; }Aquí, el color de fondo cambiará de color según el ancho del cuerpo de la página.
Estas son solo algunas de las principales funciones de los preprocesadores CSS. Como puede ver, los preprocesadores CSS son herramientas increíblemente útiles y versátiles. Muchos desarrolladores web los utilizan y es muy recomendable aprender al menos uno de ellos.
Más información:
- Los mejores tutoriales de CSS
- Documentos de SASS: //sass-lang.com/
- SASS, un preprocesador para sus guarniciones web
- MENOS documentos: //lesscss.org/
- Stylus docs: //stylus-lang.com/