¿Qué es Sass?

¿Qué es Sass?

A diferencia de frameworks de utilidades CSS como Tailwind o frameworks orientados a componentes prediseñados como Bootstrap, Sass (Syntactically Awesome Stylesheets) es de forma muy precisa un preprocesador de CSS.

Esto engloba un concepto más profundo y significa directamente que extiende las capacidades limitadas del propio lenguaje CSS, al agregar características y funcionalidades programáticas avanzadas como por ejemplo:

• Variables
• Anidación de selectores
• Mixins (fragmentos de código reutilizable)
• Funciones
• Herencia de estilos

El código Sass se escribe de manera pura dentro de archivos especializados con la extensión .scss (o .sass, de sintaxis más simplificada con identación exigente). Pero los navegadores de manera nativa solamente logran interpretar código CSS estándar. Entonces, el archivo final para poder leerse de manera apropiada luego se compila o se "transpila" a CSS normal y tradicional.

¿Sass es un framework como Bootstrap o Tailwind?

No. De ninguna forma. Sass no es y nunca se comportará al estilo de un framework de CSS, por los siguientes determinantes:

• No proporciona clases utilitarias preparadas a mano o componentes predefinidos.
• No tiene estilos base resueltos. No genera ni inyecta estética lista para poder ser usada de forma simple por el desarrollador.

Sass es en esencia una herramienta pura que agiliza escribir código por uno mismo, permite organizar todo ese código CSS de manera profesional estructuralmente distribuida, sirviendo para su mantenimiento en especial en aquellos proyectos web que demanden algo estricto o que se definan visualmente grandes o complejos.

Para poder llegar a la máxima comprensión de forma analógica: Sass para CSS es sencillamente lo que es TypeScript para JavaScript. Resulta en una sintaxis mejorada creada expresamente y que extiende al ecosistema con lógicas del lenguaje original. Es decir, Sass popularmente se define como escribir CSS moderno "con esteroides". Pero de manera definitiva al fin y al cabo cerrando todo el proceso constructivo del archivo local que terminemos de programar en el lenguaje y herramientas Sass (archivos .scss o .sass), estos sin importar cuánto varíe este código intermedio, son sistemáticamente transpilados en su salida a hojas compiladas de puro, único e inequívoco código en CSS.

¿Cómo funciona Sass? (Soluciones a CSS puro)

Sass históricamente se usa de forma fundamental para solucionar complicaciones en los enfoques de escribir de cero todo a través de código CSS puro y plano, a continuación las de mayor relevancia:

1. Variables

Permite definir colores, fuentes, configuraciones variadas de entorno o tamaños determinantes en una base constante, facilitando su llamado general para poder reutilizarlos fácilmente a todo nivel macroscópico. (Si bien esto es cierto que ya en el entorno Web se puede hacer nativamente hoy en día con las Custom Properties CSS puro, esta sintaxis base de variables simplificadas lo hace simplemente todo más sencillo de leer u organizar para programar la lógica del código backend-like del modelo conceptual de diseño).

$primary-color: #3498db;

button {
  background-color: $primary-color;
}

2. Anidación

Considerada como el gran fuerte de todo pre-procesador. Permite estructurar directamente con selectores en formato general de bloque jerárquico el orden de selección semántica de marcado enlazada por elementos HTML o clases, ahorrando extensas cadenas o escalones de código selector repetitivo.

nav {
  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

3. Modularidad

En esencia permite de forma resolutiva el poder seccionar, separar o dividir todas las cadenas y declaraciones extensas programadas de los estilos, estructurándolas eficientemente en muchos o en múltiples diferentes archivos (conocidos como "partials", definidos usualmente por el guion bajo). Permitiendo ser importados luego al archivo general unificador (conocido en forma regular base globalmente como styles.scss) de modo enlazado que combinará estructuralmente todos estos pequeños módulos separados, todo esto antes o de cara del proceso unificador enlazado general al compilar:

/* En index.scss o app.scss */
@import 'variables';
@import 'components/button';
@import 'layout/header';

4. Mixins y Funciones

Permite crear de manera inteligente un mecanismo de múltiples bloques combinados reutilizables en todo concepto con valores que acepten parámetros lógicos dinámicos variables, para ser despachados donde requerimos.

@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius; /* prefijos de vendors */
}

button {
  @include border-radius(5px);
}