SCSS (Sassy CSS)
SCSS (Sassy CSS) es la sintaxis moderna de Sass, un preprocesador de CSS que añade variables, anidamiento, mixins, herencia y funciones a CSS estándar. Los archivos SCSS se compilan a CSS estándar para uso en navegadores.
Tipo MIME
text/x-scss
Tipo
Texto
Compresión
Sin pérdida
Ventajas
- + CSS-compatible syntax — any CSS is valid SCSS
- + Powerful module system (@use, @forward) for large projects
- + Rich built-in functions for colors, math, and lists
- + Industry standard in enterprise design systems
Desventajas
- − Requires a compilation step (Dart Sass or build tool)
- − Native CSS custom properties and nesting reduce the need for SCSS
- − Large projects can have complex dependency graphs
Cuándo usar .SCSS
Usa SCSS cuando necesites variables, mixins o anidamiento en CSS. Para proyectos modernos, evalúa si las propiedades personalizadas nativas de CSS y las funciones modernas de CSS eliminan la necesidad de un preprocesador.
Detalles técnicos
SCSS extiende la sintaxis de CSS con $ variables, anidamiento de reglas, @mixin/@include, @extend para herencia, operadores matemáticos y funciones. Se compila con Dart Sass (sass) o LibSass (obsoleto). Soporta módulos @use/@forward (reemplazando @import).
Historia
Hampton Catlin creó Sass en 2006 con una sintaxis basada en indentación. SCSS (Sassy CSS) se introdujo en Sass 3.0 (2010) como una sintaxis alternativa que usa llaves como CSS normal, haciéndolo más fácil de adoptar. Dart Sass es ahora la implementación principal.