¿Qué es un preprocesador? ¿Por qué usarlo?

Entender preprocesadores

Cualquier desarrollador que haya hecho un poco de programación web está familiarizado con CSS. Es un lenguaje que permite agregar estilo a una página web, pero puede resultar bastante limitado. A través de este artículo, trataremos de entender por qué y sobre todo, discutiremos una alternativa más eficiente: los preprocesadores CSS.

Preprocesadores: de código largo y complicado, a código organizado y fácil de mantener.

Como ya sabrás, CSS te permite diseñar una página web, pero es posible que hayas notado que para diseñar un solo elemento necesitas escribir mucho código. Este código se dosordena rápidamente, puede ser difícil de leer y, por lo tanto, difícil de mantener. Esto se debe a que CSS carece de variables y funciones que poseen otros lenguajes de programación, lo que te obliga a repetirte. ¡Puede resultar muy redundante!

CSS evoluciona constantemente y se están inventando nuevos métodos para escribir código CSS más eficientemente. Entre todos estos métodos avanzados, nos centraremos principalmente en los preprocesadores de CSS.

¿Qué es un preprocesador?

En pocas palabras, un preprocesador te permite escribir CSS en un idioma alternativo (no te preocupes, es muy parecido al CSS nativo) y ofrece funciones avanzadas como variables, funciones y la posibilidad de incluir archivos. En resumen, te ayudan a escribir de manera más simple para organizar mejor tu código, evitando al mismo tiempo las repeticiones.

Una vez que el código CSS esté escrito en este nuevo idioma, se compilará para volver a transformarse en CSS nativo, el único que los navegadores web pueden entender. Esta característica de los preprocesadores es clave: aportan nuevas formas de escribir código a través de un idioma alternativo pero, en última instancia, el código enviado al navegador sigue siendo CSS nativo. Los preprocesadores no aportan nuevas funciones a CSS, pero lo hacen más eficiente.

Aquí hay un pequeño diagrama para resumir cómo funciona SCSS:

Entre los preprocesadores de CSS más comunes encontrarás Menos, Stylus... pero seguramente el más conocido es Sass/Scss.

Respecto al código, ¿cuál es la diferencia?

Aquí hay algunos ejemplos que resaltan el interés de usar los preprocesadores de CSS:

Con CSS escribirías:

</ ul>

.mi lista {

color de fondo: rojo;

}

.myList: hover {

color de fondo: azul;

}

.myList: flotar> li {

color morado;

}

.myList> li {

color verde;

}

.myList> li: hover {

color amarillo;

}

En cambio, con SCSS escribirías:

.mi lista {

color de fondo: rojo;

&: hover {

color de fondo: azul;

> li {

color morado;

}

> li {

color verde;

&: hover {

color amarillo;

}

No esta mal, ¿verdad?

Ahora, veamos un ejemplo con la definición de mixin (funciones SCSS).

Con CSS escribirías lo siguiente:

.mi texto {

text-shadow: 6px 6 x 4px # ff0000;

cuadro de sombra: 3px 3px 2px # ff6666;

}

.myText2 {

text-shadow: 6px 10 x 6px # ff0000;

cuadro de sombra: 3px 5px 3px # ff6666;

}

.myText3 {

text-shadow: 6px 1 x 3px # ff0000;

cuadro de sombra: 3px 0.5px 1.5px # ff6666;

}

Con SCSS, escribirías:

@mixin myShadows ($ x, $ y, $ blur, $ color) {

text-shadow: $ x $ y $ blur $ color;

box-shadow: $ x / 2 $ y / 2 $ blur / 2 lighten ($ color, 50);

}

.mi texto {

@include myShadows (6px 6x 4px # ff0000);

}

.myText2 {

@include myShadows (6px 10x 6px # ff0000);

}

.myText3 {

@include myShadows (6px 1x 3px # ff0000);

}

Lo interesante de todo esto es que en lugar de repetir el estilo varias veces para diferentes textos, usamos la mezcla para especificar ciertos parámetros.

Ahora sabes qué es un preprocesador de CSS y cómo usarlo.

No voy a entrar en detalles de cada paso hoy, pero me aseguraré de hacerlo en otro artículo más adelante.

¡Hasta Pronto!