Trabajando con el front end, no se puede evitar el CSS (Cascading Style Sheets) - define la forma en que cada sitio web se ve en el navegador. Junto con el HTML y el JavaScript, el CSS se considera una de las tres principales tecnologías utilizadas para la web. Sin embargo, algunos argumentan que es un poco primitiva y difícil de mantener. El CSS fue lanzado inicialmente en 1996, y aunque hubo y todavía hay actualizaciones constantes, la sintaxis básica no ha cambiado mucho. Aquí es donde un preprocesador CSS bien elegido puede ser útil.

En primer lugar, ¿qué es un preprocesador CSS?

Los navegadores de Internet sólo entienden y escuchan el CSS, por lo que no puede ser simplemente reemplazado por un lenguaje completamente nuevo. Sin embargo, tiene ciertas limitaciones , que pueden no parecer significativas en proyectos pequeños, pero que sí cobran su precio cuando se trata de grandes hojas de estilo. Para solucionar este problema, los desarrolladores utilizan preprocesadores CSS . En su esencia, los preprocesadores son programas que tienen su propia sintaxis única. Después de que escribes tu código, lo compilan a puro CSS.

La razón por la que estamos usando preprocesadores CSS es para añadir funcionalidades extra que CSS no tendría de otra manera. Por ejemplo, podría tener selectores de anidación o herencia, así como mixins (paquetes de declaración reutilizables). Las prácticas funciones adicionales te permiten ser más eficiente en tu trabajo diario y te proporcionan una escalabilidad extra.

¿Qué preprocesador de CSS deberías usar?

Elegir un preprocesador CSS no es una hazaña fácil. Al igual que con la mayoría de las tecnologías de la información, tienes una variedad de opciones, cada una con sus propias ventajas y una base de usuarios apasionados. Para hacer una elección, necesitas conocer tus opciones, reconocer sus fortalezas y entender las diferencias.

Sass vs. SCSS

Introducido por primera vez en 2006, Sass (Syntactically Awesome Style Sheets - un bonito juego de palabras con el nombre oficial de CSS) es considerado el pionero de los preprocesadores CSS. No es de extrañar que también sea el más popular! Sass también se utiliza en Bootstrap 4, que es actualmente uno de los marcos de trabajo de front-end más utilizados en el mundo y por lo tanto un destacado creador de tendencias en el mundo de la informática.

A partir de ahora, tiene dos sintaxis separadas : Sass y SCSS. Mientras que sólo existía la primera en las primeras versiones del preprocesador, el equipo se preocupó de que pudiera ser un poco demasiado diferente del simple CSS. Por lo tanto, presentaron una nueva sintaxis llamada SCSS (Sassy CSS) en la tercera versión. Los archivos también pueden tener una extensión .sass o .scss.

La principal diferencia entre Sass y SCSS es que este último utiliza punto y coma y paréntesis de la misma manera que CSS. Sass, por otro lado, no - además, utiliza un signo igual en lugar de dos puntos para la asignación. Aunque SCSS es ahora oficialmente la sintaxis principal del preprocesador CSS de Sass, no hay planes de depreciar nunca la versión original. Algunos desarrolladores afirman que en realidad es más legible debido a que es más conciso. Sin embargo, el SCSS es mucho más fácil de aprender e integrar al CSS.

Menos

Less (Hojas de Estilo Leaner) apareció por primera vez en 2009. Fue influenciado por Sass, pero tuvo su propia influencia en el formato SCSS introducido posteriormente. ¿Por qué? Porque a diferencia de la primera versión de la sintaxis de Sass, este preprocesador CSS fue creado originalmente con la intención de ser tan similar al CSS puro como fuera posible. No sólo esto significaba una curva de aprendizaje más suave, sino que también se podía utilizar cualquier código CSS preescrito como válido en Less. El preprocesador CSS de Less está escrito en JavaScript, lo que también simplifica la configuración.

Comparando a Less vs. Sass, veremos que son muy parecidos en sus funcionalidades básicas. Ambas permiten anidar, importar y usar variables. Sin embargo, en Less, también puedes levantar variables y extraer ciertos componentes de un color que no podrías con Sass - a saber, tono, saturación, luminosidad y brillo. Por otro lado, Sass te permite usar if declaraciones e interpolarlas en selectores y nombres de propiedades. Su sintaxis también contiene operadores ternarios y colectores de anidación - y Less, por desgracia, no.

Otra pequeña desventaja de Less es que utiliza el símbolo @ para la declaración de la variable (Sass utiliza el signo $ en su lugar). Sin embargo, en CSS, @ también se puede usar para keyframes y consultas de medios. Esto puede causar un poco de confusión al leer el código.

Lápiz óptico

Otro preprocesador CSS llamado Stylus apareció en el mercado en 2010. Aunque tiene una base de usuarios notablemente más pequeña que Sass o Less, vale la pena echarle un vistazo. Stylus está escrito en Node.js y por lo tanto es una opción atractiva para aquellos que ya están familiarizados con el entorno. También tiene útiles funciones y mezclas incorporadas.

Lo que distingue a Stylus ante todo es su flexibilidad : los dos puntos, los puntos y las comas son opcionales. Además, no se necesitan llaves rizadas para definir bloques de código: en lugar de símbolos, Stylus utiliza indentaciones para ello. En cuanto a las variables, puedes usar el signo $ como en Sass... Pero también puedes omitirlo. No es gran cosa.

Todo esto te permite escribir menos y tener un código más limpio. Desafortunadamente, algunos desarrolladores encuentran esta flexibilidad como un defecto. El no tener identificadores claros hace que el código sea difícil de leer y entender, especialmente en proyectos grandes. Lo que obtienes es una anarquía causada por la libertad, por así decirlo. Si comparamos Stylus vs. Sass, este último tiene claramente una ventaja con su código de fácil lectura.

PostCSS

Vamos a empezar por decir una cosa claramente: PostCSS es no en realidad un preprocesador CSS. Aunque el equipo utilizó el término al principio, más tarde se ocupó de su error. Puede ser usado como un preprocesador, un postprocesador - en realidad, un procesador de todo tipo que también puede ayudarte a optimizar, limpiar tu código, y realizar todo tipo de otras tareas. PostCSS es, en esencia, una API con una tonelada de potentes plugins de JavaScript disponibles (también puedes escribir los tuyos propios). Usándolos, puedes procesar CSS y crear herramientas personalizadas.

El PostCSS fue lanzado inicialmente en 2013 y actualmente está en la versión 7. Puedes usarlo tanto con la sintaxis CSS simple como con la de los preprocesadores mencionados anteriormente. Lo que le da una ligera ventaja sobre Sass, Less y otros preprocesadores CSS es la modularidad . Le permite elegir las características que necesita, así como trabajar más rápido. No es de extrañar que su popularidad esté aumentando rápidamente - incluso ha habido declaraciones públicas de que podría ser utilizado en la próxima versión de Bootstrap.

¿Qué más hay que saber?

Los preprocesadores CSS añaden un paso necesario de compilación, que puede ralentizar tanto el desarrollo como la depuración. El archivo CSS generado final también puede ser bastante grande.

Sin embargo, las ventajas superan con creces las desventajas en este momento. Variables, mezclas, anidamiento, múltiples funciones extra - todas estas características hacen que escribir y mantener un código sea mucho más conveniente. Elija un preprocesador con el que se sienta más cómodo y disfrute de las funcionalidades extendidas de CSS ahora!

Recomendado para ti