¿Qué es un pre-procesador CSS?
Es un programa que escribe CSS por ti basado en el código que tú escribiste a través de ese pre-procesador. Cuando usas un pre-procesador, puedes hacer cosas que no son posibles con CSS nativo como por ejemplo el uso de herencia, mix-ins, etc., haciendo un código más útil, productivo y mantenible.
Hay muchos pre-procesadores disponibles, sin embargo, en este apartado hablaré de dos de ellos: SASS y LESS.
¿Qué es SASS?
Por sus siglas en inglés, Syntactically Awesome Style Sheets. Es el pre-procesador CSS más popular y el más antiguo (2006). Tiene una comunidad grande y muchos recursos disponibles en la Web para beginners.
Podemos utilizar SASS mediante dos sintaxis: Sass o SCSS.
SASS
Su extensión es .sass
Está basado en indentación
Es un poco difícil de leer
El signo de asginación es =
SCSS
Su extensión es .scss
Utiliza llaves y puntos y comas
Es fácil de entender y se parece a CSS
El signo de asginación es :
Sin embargo, es bueno saber que todo los features están disponibles para ambas sintaxis.
Boostrap 4, un framework de CSS muy popular, está escrito en SASS. Lo curioso es que su anterior versión usaba LESS, y desde que empezó a utilizar SASS, su popularidad subió.
¿Qué es LESS?
Por sus siglas en inglés, Leaner Stylesheets. Fue lanzado en 2009, está escrito en JavaScript. Es el competidor más fuerte de SASS. A diferencia de SASS, LESS utiliza @ para declarar variables lo cual puede causar confusión con @media y @keyframes, pero una de sus ventajas fuertes es su facilidad de adicionarlo a un proyecto, puede ser con NPM o Less.js
Bajo la pequeña comparativa que se hizo líneas arriba...
¿Por qué elegir SCSS sobre SASS?
-Legibilidad. La sintaxis es muy parecida a CSS
-Curva de aprendizaje. Solo se agrega algunos features extras con respecto a CSS
-Compatibilidad. Un archivo .css es archivo .scss válido
-Recursos: Existen muchos artículos colgados en la red y algunas librerías open source
-Expansibilidad: es fácil pasar de SCSS a SASS
¿Qué podemos hacer con SASS/LESS que con Vanilla CSS no podemos?
1. Variables. Podemos guardar iNformación dentro de variables y utilizarla en nuestra hoja de estilo. Vanilla CSS usa variables pero con SASS/SCSS puedes iterar tu variables utilizando for-loop
SASS
En sass se define una variable con el signo $
@color: "#FF0000";
LESS
En less se define una variable con el signo @
$color: "#FF0000";
2. Anidamiento. ¿Recuerdas el anidamiento en HTML? La indentación en Sass permite replicar cómo se anidan los elementos HTML. Es buena práctica para evitar escribir selectors repetitivamente.
SASS/LESS
1 2 3 4 5 6 7 8 9 | nav { margin: 50px auto 0; width: 788px; height: 45px; ul { padding: 0; margin: 0; }} |
3. Mixins. Son funciones que se pueden incluir en cualquier parte de la hoja de estilo.
SASS
Utilizamos @mixin
2 3 4 5 6 7 8 9 10 | @mixin border-radius ($values) { border-radius: $values;}nav { margin: 50px auto 0; width: 788px; height: 45px; @include border-radius(10px);} |
LESS
Utilizamos un selector de clase
1 2 3 4 5 6 7 8 9 | .border( @radius ) { border-radius: @radius;}nav { margin: 50px auto 0; width: 788px; height: 45px; .border(10px);} |
4. Herencia
El concepto es similar a mixins pero en lugar de copiar todas las propiedades CSS, agrupará los selectores que tienen exactamente las mismas propiedades y valores de conjunto usando el.
SASS
Utilizamos @extends
.circle { border: 1px solid #ccc; border-radius: 50px; overflow: hidden;}.avatar { @extend .circle;}
LESS
Utilizamos :extend
.circle { border: 1px solid #ccc; border-radius: 50px; overflow: hidden;}.avatar:extend(.circle) {}5. Error Handling
La notificación de errores también es un factor importante para facilitar la depuración del código.
SASS
Sass introduce nuevas directivas: @error, @warn and @debug.
La directiva @error y @warn te permite lanzar un mensaje de error personalizado. Esta característica adicional es genial si estás creando un sistema de diseño o un marco de trabajo basado en Sass, por ejemplo. Querrás que arroje un mensaje si están usando un mixin depreciado o cuando pasen un valor correcto, por ejemplo:
@mixin border-radius( $rad ) { @warn "The `border-radius()` mixin will be deprecated in version 5.2, use `corner-radius()` mixin instead"; border-radius: $rad;}
La directiva @debug funciona de forma similar al console.log() en JavaScript, por ejemplo:
$space: 10px;div { @debug $space; margin: ($spaces * 2);}
LESS
No proporciona una directiva especial para manejar errores personalizados como Sass.
More references
If you want to learn more about SASS, I recommend you this eBook: https://marksheet.io/sass.html
If you want to discover more about the differences between sass and less, you can check: https://css-tricks.com/sass-vs-less/