¿Qué es Sass?

Sass (Syntactically Awesome Style Sheets) es un preprocesador CSS: escrides código en un lenguaje extendido que luego se compila a CSS estándar. El navegador nunca ve Sass — recibe el CSS resultante igual que siempre.

Nació en 2006 y durante años fue el estándar de facto para escribir CSS a escala. Hoy muchas de sus características (variables, anidamiento, funciones) han llegado al CSS nativo, pero Sass sigue siendo relevante en proyectos grandes por sus mixins, herencia y ecosistema maduro.

---

Las dos sintaxis: SCSS vs Sass indentado

Sass tiene dos sintaxis. SCSS es la más usada porque es un superconjunto de CSS — cualquier CSS válido es SCSS válido:

// SCSS — usa llaves y punto y coma (como CSS)
$color-primary: #3d5a80;

.btn {
  background: $color-primary;
  padding: 0.6rem 1.2rem;

  &:hover {
    background: darken($color-primary, 10%);
  }
}

La sintaxis Sass indentado usa indentación en lugar de llaves, como Python:

// Sass indentado — sin llaves ni punto y coma
$color-primary: #3d5a80

.btn
  background: $color-primary
  padding: 0.6rem 1.2rem

  &:hover
    background: darken($color-primary, 10%)

Hoy en día casi todo el mundo usa SCSS. Los archivos usan la extensión .scss o .sass.

---

Características principales

Variables

$font-sans: 'Inter', system-ui, sans-serif;
$color-text: #1a1a2e;
$space-4: 1rem;

body {
  font-family: $font-sans;
  color: $color-text;
}

Las variables de Sass se procesan en tiempo de compilación. Son diferentes a las variables CSS nativas (--variable): las nativas viven en el DOM, se pueden cambiar con JavaScript y respetan la herencia del DOM. Las de Sass son reemplazos estáticos que desaparecen en el CSS compilado.

Anidamiento

.nav {
  display: flex;
  gap: 1rem;

  a {
    color: inherit;
    text-decoration: none;
  }

  // & referencia al selector padre
  &:hover { background: rgba(0,0,0,0.05); }
  &.is-active { font-weight: 700; }

  // Genera .nav__item
  &__item { padding: 0.5rem; }

  // Media queries anidadas
  @media (max-width: 768px) {
    flex-direction: column;
  }
}

El anidamiento demasiado profundo genera selectores CSS muy específicos y difíciles de sobreescribir. Como regla general, no superes 3 niveles de anidamiento.

Mixins — bloques de CSS reutilizables

// Definición
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin truncate($lines: 1) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// Uso
.hero {
  @include flex-center;
  min-height: 400px;
}

.card__description {
  @include truncate(3); // máximo 3 líneas
}

@extend — herencia de estilos

%btn-base {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.btn-primary {
  @extend %btn-base;
  background: $color-primary;
  color: white;
}

.btn-secondary {
  @extend %btn-base;
  background: transparent;
  border: 2px solid $color-primary;
}

El % define un placeholder — un selector que solo existe para ser extendido, no se incluye en el CSS final si nadie lo usa.

Funciones

// Funciones de color integradas
darken(#3d5a80, 10%)   // oscurece el color
lighten(#3d5a80, 15%)  // aclara el color
mix(#ff0000, #0000ff, 50%)  // mezcla dos colores
transparentize(#3d5a80, 0.3) // añade transparencia

// También puedes crear funciones propias
@function rem($px) {
  @return #{$px / 16}rem;
}

.titulo { font-size: rem(24); } // → 1.5rem

Parciales e imports

Sass permite dividir el CSS en archivos _parciales.scss (el guión bajo indica que no se compilan directamente) e importarlos en un archivo principal:

// styles/main.scss
@use 'tokens/colors';
@use 'tokens/typography';
@use 'base/reset';
@use 'components/button';
@use 'components/card';

@use es la forma moderna (desde Dart Sass). El antiguo @import está deprecado porque contamina el espacio de nombres global.

---

Sass vs Variables CSS nativas

	Variables Sass $var	Variables CSS --var
Dónde viven	Solo en tiempo de compilación	En el DOM en tiempo de ejecución
JavaScript puede cambiarlas	No	Sí
Heredan por el DOM	No	Sí
Disponibles en media queries	Sí	No directamente
Necesita compilación	Sí	No

La tendencia actual es usar variables CSS nativas para tokens de diseño (colores, espaciado) y reservar Sass para mixins y organización de archivos, si se usa.

---

Instalación

npm install -D sass

Vite, webpack y la mayoría de bundlers modernos detectan .scss automáticamente una vez instalado el paquete.

Less CSS Vite

---

---