Preprocesadores CSS: Less y Sass

Preprocesadores CSS

La simplicidad de CSS hace que sea muy limitado. Por ejemplo, en el caso de necesitar utilizar condicionales o estructuras anidadas. Para facilitar estas tareas, y muchas otras, nacen los preprocesadores CSS.

Mediante los preprocesadores CSS se desarrollan estilos más mantenibles y con una sintaxis más rica. Los ficheros de los preprocesadores son parecidos a los de CSS y deben compilarse para traducirse a hojas de estilo CSS reconocibles por los diferentes navegadores.

La compilación se realiza generalmente mediante herramientas de línea de comandos o con herramientas de automatización de tareas (como Gulp o Grunt). Los preprocesadores más utilizados son Less y Sass,

Preprocesadores Less y Sass

Una de las principales ventajas originales de los preprocesadores como Less y Sass era la posibilidad de definir y reutilizar variables, lo que facilitaba mantener la coherencia visual del proyecto. Por ejemplo, bastaba cambiar el valor de una variable para actualizar un color en todos los estilos.
Hoy en día, CSS ya cuenta con variables personalizadas, que ofrecen una funcionalidad similar —e incluso más potente—, ya que pueden cambiarse dinámicamente y usarse en cualquier parte del documento sin necesidad de compilar.

Además de las variables, los preprocesadores CSS también introducen la noción de anidamiento, lo que permite escribir estilos de manera más jerárquica y estructurada. Esto significa que los selectores secundarios pueden anidarse dentro de selectores primarios, lo que resulta en un código más limpio y legible. Por ejemplo, en lugar de repetir el selector completo para cada regla CSS, como se hace en CSS tradicional, con los preprocesadores se pueden anidar las reglas dentro de los selectores correspondientes, lo que hace que el código sea más fácil de entender y mantener.

Otra característica de los preprocesadores CSS es la capacidad de crear mixins, que son fragmentos de código reutilizables que se pueden incluir en otros estilos. Esto facilita la aplicación de estilos comunes a múltiples elementos sin tener que repetir el mismo código una y otra vez. Por ejemplo, se puede definir un mixin para aplicar un efecto de transformación a un elemento y luego simplemente incluir ese mixin en los estilos de cualquier elemento que necesite ese efecto. Veamos algunos ejemplos de código.

Ejemplos Sass:

Variables:

$font-stack: Helvetica, sans-serif; 
$primary-color: #333; 

body {   
     font:  $font-stack;   
     color: $primary-color; 
}

Nesting:

nav { 
    ul { 
        margin: 0; 
        padding: 0; 
        list-style: none; 
    } 
    li { 
        display: inline-block; 
    } 
}

Operators:

article { 
    float: left; 
    width: 600px / 960px * 100%; 
} 
aside { 
    float: right; 
    width: 300px / 960px * 100%; 
}

Mixins:

@mixin transform($property) { 
    -webkit-transform: $property; 
    -ms-transform: $property; 
    transform: $property;
} 
.box { 
    @include transform(rotate(30deg)); 
}

Conoce más acerca de los preprocesadores Sass y Less en los siguientes enlaces:

• Aprende con el tutorial de Sass disponible en Eniun.
• Aprende Less

Durante muchos años, los preprocesadores como Sass o Less eran casi imprescindibles porque CSS tenía muchas limitaciones: no existían variables, anidamientos ni funciones útiles. Sin embargo, con el tiempo, CSS ha ido incorporando muchas de esas capacidades de forma nativa:

• Variables (--color-primario)
• Anidamiento (@nest)
• Funciones (calc(), clamp(), min(), max())
• Selectores relacionales (:is(), :where(), :has())
• Y herramientas como PostCSS, que permiten procesar CSS moderno sin necesidad de un lenguaje adicional.

Por eso, en proyectos nuevos —sobre todo los que usan frameworks modernos como React, Vue o Svelte— muchas personas prefieren usar CSS nativo dejando los preprocesadores solo para proyectos heredados o equipos que ya los dominan.

Aun así, Sass sigue teniendo su público, sobre todo en:

• Grandes proyectos con código antiguo.
• Entornos donde el equipo ya tiene una base sólida de mixins o funciones Sass.
• Frameworks o librerías que aún dependen de él (por ejemplo, algunas versiones de Bootstrap).