Sass / SCSS
desde cero

Sass extiende CSS con herramientas de organización; el navegador recibe únicamente el CSS resultante de la compilación.

SCSS conserva llaves y punto y coma de CSS, por lo que un archivo CSS válido también puede ser una base SCSS válida.

Las variables almacenan decisiones de diseño como colores, espacios y tipografías para evitar valores dispersos.

La anidación expresa relaciones cercanas, pero demasiados niveles producen selectores frágiles y difíciles de sobrescribir.

Los parciales dividen responsabilidades y @use crea módulos con espacios de nombres, evitando colisiones globales.

Un mixin encapsula un grupo de declaraciones reutilizable cuando una simple variable no es suficiente.

Los parámetros convierten un mixin en una herramienta configurable y los valores por defecto mantienen una llamada sencilla.

Una función Sass calcula y devuelve un valor; no debería producir bloques de estilos como lo hace un mixin.

Los placeholders comparten selectores mediante @extend, aunque deben evitarse cuando generan combinaciones difíciles de predecir.

Los cálculos Sass ocurren al compilar; calc() queda en el CSS para resolver valores que dependen del navegador.

Una arquitectura separa configuración, herramientas, elementos, componentes y páginas para localizar cambios con rapidez.

Mapas y listas agrupan tokens relacionados y permiten consultar valores por nombre en lugar de repetir variables aisladas.

Los bucles generan familias pequeñas y previsibles de utilidades; los condicionales adaptan la salida sin duplicar bloques.

Un sistema de diseño conecta tokens, tipografía, espacios y componentes bajo reglas consistentes y documentadas.

La salida final debe estar comprimida, sin archivos innecesarios y acompañada de mapas de fuente solo cuando el entorno los requiera.