Header Ads Widget

Ticker

6/recent/ticker-posts

Preprocesadores CSS - Sass vs LESS vs Stylus (con ejemplos)

 Ha pasado un tiempo desde que el concepto de preprocesador de CSS hizo su debut en el pilar del flujo de trabajo de desarrollo web front-end y cambió la forma en que codificamos CSS. Decir que su impacto en empujar los límites de lo que CSS puede lograr ha sido nada menos que revolucionario, sería quedarse corto. Para todos los desarrolladores de front-end que discuten activamente sobre el debate de Sass vs LESS en sus proyectos, solo puedo esperar que no les duela el cuello por asentir con la cabeza.

Sería insondable volver a los días sin Sass, atrapado en el atolladero desordenado del código CSS de vainilla que a menudo resultaba difícil de administrar y organizar a medida que escala. Sin embargo, muchos principiantes e incluso algunos desarrolladores experimentados se están haciendo un flaco favor a sí mismos al ser reacios a adoptar preprocesadores CSS y continuar ignorándolos.

En este artículo, exploraremos qué son los preprocesadores CSS, cuáles son sus ventajas, sus características, comparando los tipos más populares de preprocesadores CSS que se utilizan y, finalmente, cómo configurarlos en su proyecto.

¿Qué es un preprocesador CSS?

CSS en sí mismo carece de lógica y funcionalidad complejas que se requieren para escribir código reutilizable y organizado. Como resultado, un desarrollador está limitado por limitaciones y enfrentaría una dificultad extrema en el mantenimiento y la escalabilidad del código, especialmente cuando trabaja en proyectos grandes que involucran código extenso y múltiples hojas de estilo CSS. Aquí es donde los preprocesadores de CSS vienen al rescate.

Un preprocesador de CSS es una herramienta que se utiliza para ampliar la funcionalidad básica del CSS estándar predeterminado a través de su propio lenguaje de programación. Nos ayuda a usar una sintaxis lógica compleja como: variables, funciones, mixins, anidación de código y herencia, por nombrar algunos, sobrealimentando su CSS vainilla. Mediante el uso de preprocesadores CSS, puede automatizar sin problemas las tareas domésticas, crear fragmentos de código reutilizables, evitar la repetición y la hinchazón del código y escribir bloques de código anidados que estén bien organizados y sean fáciles de leer.

Sin embargo, los navegadores solo pueden comprender el código CSS de vainilla nativo y no podrán interpretar la sintaxis del preprocesador de CSS. Por lo tanto, la sintaxis del preprocesador compleja y avanzada debe compilarse primero en la sintaxis CSS nativa, que luego puede ser interpretada por los navegadores para evitar problemas de compatibilidad entre navegadores . Si bien los diferentes preprocesadores tienen sus propias sintaxis únicas, eventualmente todos ellos se compilan en el mismo código CSS nativo.

Avanzando en el artículo, veremos los 3 preprocesadores CSS más populares que utilizan actualmente los desarrolladores de todo el mundo, es decir Sass , LESS y Stylus .

Antes de decidir el ganador entre Sass vs LESS vs Stylus, déjenos conocerlos en detalle primero.

Sass - Hojas de estilo sintácticamente impresionantes

Sass es el acrónimo de " Syntactically Awesome Style Sheets ". Sass no solo es el preprocesador de CSS más popular del mundo, sino también uno de los más antiguos, lanzado en 2006 por Hampton Catlin y luego desarrollado por Natalie Weizenbaum.

Aunque Sass está escrito en lenguaje Ruby, un Precompiler LibSass permite analizar Sass en otros lenguajes y desacoplarlo de Ruby. Sass tiene una comunidad activa masiva y amplios recursos de aprendizaje disponibles en la red para principiantes. Gracias a su madurez, estabilidad y poderosa destreza lógica, Sass se ha establecido a la vanguardia del preprocesador CSS por delante de sus pares rivales.

Sass se puede escribir en 2 sintaxis utilizando Sass o SCSS. ¿Cuál es la diferencia entre los dos? Vamos a averiguar.

Declaración de sintaxis: Sass vs SCSS

  • SCSS son las siglas de Sassy CSS. A diferencia de Sass, SCSS no se basa en la sangría.
  • La extensión .sass se usa como sintaxis original para Sass, mientras que SCSS ofrece una sintaxis más nueva con la extensión .scss.
  • A diferencia de Sass, SCSS tiene llaves y punto y coma, al igual que CSS.
  • A diferencia de SCSS, Sass es difícil de leer ya que se desvía bastante de CSS. Es por eso que SCSS es la sintaxis de Sass más recomendada, ya que es más fácil de leer y se parece mucho al CSS nativo mientras que al mismo tiempo disfruta del poder de Sass.

Considere el siguiente ejemplo con la sintaxis Sass vs SCSS junto con el código CSS compilado.

Sass SINTAXIS

1
2
3
4
5
6
$font-color: #fff
$bg-color: #00f
  
#box
  color: $font-color
  background: $bg-color

SINTAXIS SCSS

1
2
3
4
5
6
7
$font-color: #fff;
$bg-color: #00f;
  
#box{
  color: $font-color;
  background: $bg-color;
}

CSS COMPILADO

1
2
3
4
#box {
  color: #fff;
  background: #00f;
}

En ambos casos, ya sea Sass o SCSS, el código CSS compilado será el mismo:

Uso de Sass

Podría decirse que el framework de front-end más popular Bootstrap está escrito en Sass. Hasta la versión 3, Bootstrap estaba escrito en MENOS, pero bootstrap 4 adoptó Sass y aumentó su popularidad. Algunas de las grandes empresas que utilizan Sass son: Zapier, Uber, Airbnb y Kickstarter.

MENOS - Hojas de estilo más delgadas

LESS es un acrónimo de “Leaner Stylesheets”. Fue lanzado en 2009 por Alexis Sellier, 3 años después del lanzamiento inicial de Sass en 2006. Mientras que Sass está escrito en Ruby, LESS está escrito en JavaScript. De hecho, LESS es una biblioteca de JavaScript que amplía la funcionalidad del CSS vainilla nativo con mixins, variables, anidamiento y bucle de conjunto de reglas. Sass vs LESS ha sido un debate acalorado. No es ninguna sorpresa que LESS sea el competidor más fuerte de Sass y tenga la segunda base de usuarios más grande. Sin embargo, cuando bootstrap abandonó LESS a favor de Sass con el lanzamiento de Bootstrap 4, la popularidad de LESS disminuyó. Una de las pocas desventajas de LESS sobre Sass es que no admite funciones. A diferencia de Sass, LESS usa @ para declarar variables que pueden causar confusión con @media y @keyframes. Sin embargo, Una ventaja clave de LESS sobre Sass y Stylus o cualquier otro preprocesador, es la facilidad de agregarlo a su proyecto. Puede hacerlo utilizando NPM o incorporando el archivo Less.js.

Declaración de sintaxis: MENOS

Utiliza extensión .less. La sintaxis de LESS es bastante similar a SCSS con la excepción de que para declarar variables, en lugar del signo $, LESS usa @.

1
2
3
4
5
6
7
@font-color: #fff;
@bg-color: #00f
  
#box{
  color: @font-color;
  background: @bg-color;
}

CSS COMPILADO

1
2
3
4
#box {
    color: #fff;
    background: #00f;
  }

Uso de MENOS

El popular framework Bootstrap hasta el lanzamiento de la versión 4 estaba escrito en MENOS. Sin embargo, otro marco popular llamado SEMANTIC UI todavía está escrito en LESS. Entre las grandes empresas que utilizan Sass se encuentran: Indiegogo, Patreon y WeChat.

Aguja

El lápiz óptico fue lanzado en 2010 por el ex desarrollador de Node JS TJ Holowaychuk, casi 4 años después del lanzamiento de Sass y 1 año después del lanzamiento de LESS. El lápiz está escrito en Node JS y encaja perfectamente con la pila JS. El lápiz estuvo fuertemente influenciado por la destreza lógica del Sass y la simplicidad de LESS. A pesar de que Stylus sigue siendo popular entre los desarrolladores de Node JS, no ha logrado hacerse una parte considerable por sí mismo. Una ventaja de Stylus sobre Sass o LESS es que está armado con funciones integradas extremadamente poderosas y es capaz de manejar computación pesada.

Declaración de sintaxis: Stylus

Utiliza la extensión .styl. Stylus ofrece una gran flexibilidad en la sintaxis de escritura, admite CSS nativo y permite la omisión de corchetes, dos puntos y punto y coma. Además, tenga en cuenta que Stylus no usa los símbolos @ o $ para definir variables. En cambio, Stylus usa los operadores de asignación para indicar una declaración de variable.

Aguja

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
/* STYLUS SYNTAX WRITTEN LIKE NATIVE CSS */
font-color = #fff;
bg-color = #00f;
  
#box {
    color: font-color;
    background: bg-color;
}
  
/* OR */
  
/* STYLUS SYNTAX WITHOUT CURLY BRACES */
font-color = #fff;
bg-color = #00f;
  
#box
    color: font-color;
    background: bg-color;
  
/* OR */
  
/* STYLUS SYNTAX WITHOUT COLONS AND SEMICOLONS */
font-color = #fff
bg-color = #00f
  
#box
    color font-color
    background bg-color

CSS COMPILADO

1
2
3
4
#box {
    color: #fff;
    background: #00f;
}

Uso de lápiz óptico

Algunos marcos notables escritos en Stylus son Basis y Kouto Swiss. Entre las grandes empresas que utilizan Stylus se encuentran: Accenture, HackerEarth, Coursera.

Popularidad de los preprocesadores CSS

A pesar de que el CSS nativo está avanzando y avanzando a pasos agigantados, agregando soporte para nuevas funciones como variables de propiedad personalizadas, los preprocesadores de CSS aún disfrutan de una gran popularidad y una lealtad inquebrantable entre los desarrolladores. Según el popular, The Front End Tooling Survey de Ashley Nolan, una gran mayoría, el 86,86% de los desarrolladores están utilizando algún tipo de preprocesador de CSS (Sass es el líder del paquete), mientras que el 13,14% de los desarrolladores todavía se apegan a escribir CSS vainilla sin ningún tipo de Preprocesador CSS.

USO DEL PREPROCESADOR CSS - ENCUESTA DE HERRAMIENTAS PRINCIPALES 2019

Apenas es una sorpresa que la guerra entre Sass vs LESS vs Stylus u otros esté claramente dominada por Sass al obtener una mayoría del 77.27% de participación, casi un 12% de aumento con respecto al año anterior. Aunque LESS también ha progresado con un porcentaje mayor, es decir, un 7,52%, el porcentaje general de usuarios que adoptan sigue siendo bastante bajo, si hablamos de Sass vs LESS. La popularidad del lápiz óptico en 2019 es un poco lenta con un aumento de solo 1.08% en comparación con 2018.

Otra encuesta clave llamada State Of CSS 2019 refleja un sentimiento similar, pero ofrece una visión más profunda de la popularidad de los diferentes preprocesadores de CSS. En lo que respecta a la participación de usuarios entre los preprocesadores, Sass, como se esperaba, tiene la gigantesca participación del 80%, seguido de LESS con el 47% y finalmente Stylus con el 14%. La encuesta también refleja que es más probable que los desarrolladores experimentados utilicen algún tipo de preprocesador CSS que los principiantes con poca experiencia.

USO DEL PREPROCESADOR DE CSS - ESTADO DE LA ENCUESTA DE CSS 2019

Otra perspectiva interesante que ofrece la encuesta State Of CSS es: clasificaciones de índices de conciencia, interés y satisfacción. Sass ha logrado volver a ganar el primer lugar, liderando las tres categorías con Conciencia 100%, Interés 59% y Satisfacción en un máximo del 90%. A pesar de que LESS disfruta del mismo nivel de conciencia que Sass, la tasa de interés ha caído enormemente y el nivel de satisfacción apenas llega al 50%. El lápiz tiene la clasificación de menor conciencia, pero tiene casi las mismas puntuaciones en lo que respecta al interés y la satisfacción.

Sass vs LESS vs Stylus

Las mejores herramientas de compilación para preprocesadores CSS

Como comentamos anteriormente, los navegadores no pueden interpretar la sintaxis del preprocesador CSS como Sass LESS o Stylus. Primero debe compilarse en CSS. Esto se puede hacer fácilmente utilizando compiladores de terceros o las extensiones del editor de código que se mencionan a continuación.

Compilador Live Sass: una extensión de VSCode

Live Sass es una de las extensiones de código de Visual Studio más populares creadas por Ritwick Dey que no solo compila / transpila su archivo Sass / SCSS en CSS en tiempo real, sino que también permite que los navegadores en vivo se recarguen para mostrar los cambios automáticamente. Esta extensión garantiza que nunca tendrá que salir de la ventana del editor de código y elimina por completo la necesidad de un compilador de terceros.

Prepros

Prepros es un compilador multiplataforma gratuito disponible para Windows, Mac OS y Linux. Puede compilar los 3 principales preprocesadores de CSS que hemos comentado: Sass, LESS y Stylus. Además de la compilación de formularios, Prepros tiene una interfaz simple y fácil de usar junto con funciones ricas. Prepros ofrece varias características clave interesantes como el autoprefixer de CSS para impulsar File Minifier y Uglifier, optimización de imagen junto con recarga en vivo. Eso no es todo, también ofrece una mejor compatibilidad entre navegadores , que es un proceso para asegurarse de que su sitio web se represente de manera consistente en diferentes navegadores. Con LambdaTest, puede realizar pruebas en varios navegadores en más de 2000 navegadores reales que se ejecutan en sistemas operativos reales en la nube.

¿Qué es la compatibilidad entre navegadores y por qué la necesitamos?

CodeKit

Codekit es un kit de herramientas de desarrollo premium para Mac OS. Codekit es el compilador más rico en funciones que viene con optimizador de imágenes, minificado, eliminador de caché, NPM integrado y varios marcos CSS junto con herramientas de depuración.

¿Por qué usar preprocesadores CSS en todos los casos no es una buena idea?

Aunque los preprocesadores de CSS como Sass, LESS o Stylus han demostrado ser útiles en el flujo de trabajo de desarrollo de front-end y tienen una larga lista de méritos en sus nombres, existen casos particulares en los que es posible que no encuentre la necesidad de utilizar estos preprocesadores.

No los use por el bien de las variables

Si planea usar Sass o algún otro preprocesador de CSS solo por el bien de las variables, entonces el CSS nativo puede satisfacer sus necesidades. Las propiedades personalizadas de CSS son variables definidas por el usuario creadas usando la notación '-' y a las que se accede usando la función var (). Una propiedad personalizada se puede definir dentro de cualquier elemento, pero la convención popular es definir la variable de propiedad personalizada globalmente dentro del selector ': root'.

1
2
3
4
5
6
7
8
9
:root {
  --font-color:  #777;
  --bg-color: #f00;
}
 
.content {
  color: var(--font-color)
  background-color: var(--bg-color);
}

Una ventaja de usar la variable de propiedad personalizada de CSS nativo sobre la variable Sass o LESS es que se actualizan dinámicamente en lugar de después de compilarse.

Recuerde, Native CSS ofrece la funcionalidad Calc ()

El CSS nativo también ofrece la funcionalidad calc () para realizar cálculos de valor de propiedad. Junto con la variable de propiedad personalizada de CSS, puede resultar bastante útil:

1
2
3
4
5
6
:root {
    --font-size: calc(16px + 0.2vw);
}
body {
   font-size: var(--font-size);

No puede obtener un control absoluto sobre CSS con preprocesadores

Si desea tener un control directo absoluto sobre CSS en lugar de depender de CSS compilado, es posible que los preprocesadores no sean su taza de té. Si tiene problemas para comprender cómo y por qué se ha generado un código CSS compilado en particular a partir de un preprocesador, utilice CSS básico hasta que tenga una comprensión más profunda de cómo funciona la sintaxis del preprocesador.

Los preprocesadores CSS no son para la implementación constante de código

Si desea mantener la implementación de su código lista en todo momento en lugar de la compilación constante desde el preprocesador de CSS a CSS nativo después de cada cambio. Aunque el uso de compiladores de preprocesador de terceros como 'Prepross' o extensiones de editor de código como 'Live Sass' en VS Code puede compilar automáticamente su Sass u otro código de preprocesador en CSS vanilla y actualizar los cambios en una ventana del navegador usando la vista previa en vivo.

Entonces, Sass vs LESS vs Stylus, ¿cuál es tu elección?

Los 3 grandes: Sass, LESS y Stylus, continúan dominando la carrera de preprocesadores CSS con Sass / SCSS disfrutando del estatus de líder indiscutible en popularidad. Los tres preprocesadores tienen características y funcionalidades casi similares. Cada preprocesador de CSS lleva a cabo una tarea determinada de una manera única y característica, lo que permite a los desarrolladores utilizar herramientas extremadamente poderosas para escribir código limpio a un ritmo vertiginoso. Si bien Sass tiene la mayor base de usuarios y comunidad activa, LESS es el más fácil de compilar e integrar. Por otro lado, Stylus sigue siendo una opción popular para los desarrolladores de Node JS, ya que combina la extensa destreza lógica de Sass con la simplicidad de LESS. Algunos otros preprocesadores CSS que puede explorar son:

  1. Por favor
  2. CSS-Crush
  3. Mito
  4. Jardín
  5. Rehacer

Al final, la elección del preprocesador CSS dependería en gran medida de las preferencias del desarrollador y los requisitos del proyecto. ¿Me perdí tu preprocesador CSS favorito? Déjame saber abajo en los comentarios. ¡Hasta la próxima! 🙂

Publicar un comentario

0 Comentarios