Scss

Cheat Sheet completa de SCSS

Esta cheat sheet de SCSS reúne la sintaxis y los patrones que más se usan en proyectos reales: variables, nesting, mixins, funciones, módulos, listas, mapas y generación de utilidades.

Si quieres la base del lenguaje antes de meter una capa de preprocesado, tienes la Cheat Sheet completa de CSS. Y si quieres una comparativa más estratégica, tienes también Sass, SCSS, Less y CSS anidado.

Variables

Las variables en SCSS te permiten reutilizar colores, espacios, radios y tokens sin repetir valores por todo el archivo.

$color-primary: #2563eb;
$color-text: #172033;
$radius-md: 12px;
$space-4: 1rem;

body {
  color: $color-text;
}

.button {
  background: $color-primary;
  border-radius: $radius-md;
  padding: $space-4;
}

Nesting

El nesting agrupa selectores relacionados y ayuda a leer mejor la estructura visual de un componente.

.card {
  padding: 1rem;
  border-radius: 12px;

  .title {
    font-size: 1.25rem;
  }

  .description {
    color: #5b6577;
  }
}

Parent selector `&`

El selector & hace referencia al selector padre actual y sirve para estados, variantes y combinaciones más compactas.

.button {
  background: #2563eb;

  &:hover {
    background: #1d4ed8;
  }

  &:focus-visible {
    outline: 3px solid #93c5fd;
  }

  &.is-loading {
    opacity: 0.6;
  }

  &--ghost {
    background: transparent;
    border: 2px solid currentColor;
  }
}

Interpolación

La interpolación permite construir selectores, nombres de clases o propiedades de forma dinámica a partir de variables.

$side: left;
$size: lg;

.box {
  margin-#{$side}: 1rem;
}

.btn-#{$size} {
  padding: 1rem 1.5rem;
}

Parciales y módulos

Los parciales y módulos ayudan a dividir el SCSS en archivos pequeños y a organizar mejor tokens, componentes y layout.

// styles/main.scss
@use 'tokens/colors';
@use 'tokens/spacing';
@use 'components/button';
@use 'components/card';

// tokens/_colors.scss
$primary: #2563eb;
$accent: #ec4899;

// components/_button.scss
@use '../tokens/colors';

.button {
  background: colors.$primary;
}

@use es la forma moderna. El antiguo @import está deprecado.

Mixins

Los mixins encapsulan bloques reutilizables de estilos y aceptan parámetros para no repetir patrones comunes.

@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;
}

.hero {
  @include flex-center;
  min-height: 50vh;
}

.excerpt {
  @include truncate(3);
}

Mixins con contenido

Los mixins con @content te dejan envolver estilos personalizados dentro de una misma estructura reutilizable.

@mixin dark-theme {
  background: #101827;
  color: #f8fafc;

  @content;
}

.panel {
  @include dark-theme {
    border: 1px solid #334155;
  }
}

Parámetros por defecto y nombrados

Los parámetros por defecto y nombrados hacen que los mixins sean más flexibles y más legibles al usarlos.

@mixin button($bg: #2563eb, $color: white, $radius: 999px) {
  background: $bg;
  color: $color;
  border-radius: $radius;
  padding: 0.75rem 1.25rem;
}

.btn-primary {
  @include button();
}

.btn-danger {
  @include button($bg: #dc2626);
}

`@extend` y placeholders

@extend reutiliza reglas existentes y los placeholders evitan generar CSS si no se extienden en ningún sitio.

%btn-base {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.btn-primary {
  @extend %btn-base;
  background: #2563eb;
  color: white;
}

.btn-secondary {
  @extend %btn-base;
  background: white;
  color: #172033;
}

Usa @extend con criterio. En muchos casos un mixin es más predecible.

Funciones propias

Las funciones propias sirven para transformar valores y centralizar pequeñas utilidades de cálculo en tu sistema de estilos.

@function rem($px) {
  @return #{$px / 16}rem;
}

@function columns($current, $total) {
  @return percentage($current / $total);
}

.title {
  font-size: rem(32);
}

.col-6 {
  width: columns(6, 12);
}

Funciones útiles de color

SCSS incluye funciones para aclarar, oscurecer, mezclar o transparentar colores sin tener que calcularlos a mano.

$primary: #2563eb;

.box {
  background: lighten($primary, 10%);
  border-color: darken($primary, 8%);
  color: mix($primary, #000, 20%);
  box-shadow: 0 8px 20px transparentize($primary, 0.75);
}

Condicionales

Los condicionales permiten variar estilos o mixins según el valor de una variable o una condición concreta.

$theme: dark;

@mixin themed-surface {
  @if $theme == dark {
    background: #0f172a;
    color: white;
  } @else {
    background: white;
    color: #172033;
  }
}

.surface {
  @include themed-surface;
}

Bucles `@for`

@for es útil cuando necesitas generar una secuencia numérica de clases o reglas repetitivas.

@for $i from 1 through 6 {
  .col-#{$i} {
    width: percentage($i / 6);
  }
}

Bucles `@each`

@each recorre listas o mapas y encaja muy bien para crear utilidades desde colecciones de valores.

$states:
  success #16a34a,
  warning #d97706,
  danger #dc2626;

@each $name, $color in $states {
  .alert-#{$name} {
    border-left: 4px solid $color;
  }
}

`@while`

@while resuelve casos más manuales o dinámicos, aunque suele usarse menos que @for y @each.

$i: 1;

@while $i <= 4 {
  .z-#{$i} {
    z-index: $i;
  }

  $i: $i + 1;
}

Listas

Las listas agrupan valores relacionados y se usan para extraer posiciones concretas o recorrerlos con bucles.

$spacings: 0.25rem, 0.5rem, 1rem, 1.5rem;

.stack {
  gap: nth($spacings, 3); // 1rem
}

Mapas

Los mapas funcionan como pares clave-valor y son muy útiles para tokens de color, spacing o breakpoints.

$colors: (
  primary: #2563eb,
  accent: #ec4899,
  success: #16a34a,
);

.button {
  background: map-get($colors, primary);
}

Generar utilidades desde mapas

Una de las ventajas reales de SCSS es generar clases utilitarias a partir de mapas sin escribirlas una por una.

$spaces: (
  1: 0.25rem,
  2: 0.5rem,
  3: 0.75rem,
  4: 1rem,
  5: 1.5rem,
);

@each $key, $value in $spaces {
  .mt-#{$key} {
    margin-top: $value;
  }

  .mb-#{$key} {
    margin-bottom: $value;
  }
}

Operaciones

SCSS puede hacer operaciones matemáticas básicas con medidas y variables para derivar tamaños y proporciones.

$base: 8px;

.box {
  padding: $base * 2;
  border-radius: $base / 2;
  width: calc(100% - #{$base * 4});
}

Media queries anidadas

Anidar media queries dentro del componente mejora la cercanía entre estilos base y estilos responsivos.

.hero {
  display: grid;
  gap: 1rem;

  @media (min-width: 768px) {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

`@supports` anidado

@supports permite aplicar mejoras progresivas cuando el navegador sí soporta una característica concreta.

.layout {
  display: flex;

  @supports (display: grid) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

Importar CSS normal

SCSS también puede convivir con CSS tradicional, fuentes externas y hojas que no forman parte del sistema modular.

@use 'tokens/colors';
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

Ejemplo de arquitectura simple

Esta estructura separa tokens, base, layout, componentes y páginas para que el proyecto no se convierta en un bloque único.

// styles/main.scss
@use 'tokens';
@use 'base/reset';
@use 'base/typography';
@use 'layout/container';
@use 'components/button';
@use 'components/card';
@use 'pages/home';

styles/
  _tokens.scss
  base/_reset.scss
  base/_typography.scss
  layout/_container.scss
  components/_button.scss
  components/_card.scss
  pages/_home.scss
  main.scss

SCSS vs CSS nativo

Esta comparativa deja claro qué parte cubre ya CSS moderno y qué sigue aportando SCSS en proyectos reales.

Necesidad	CSS nativo	SCSS
Variables de runtime	Sí, con custom properties	No
Nesting	Sí	Sí
Mixins	No	Sí
Bucles	No	Sí
Funciones propias	No	Sí
Módulos	No	Sí
Compilación necesaria	No	Sí

Buenas prácticas

SCSS ayuda mucho cuando se usa con criterio, pero mal usado también puede generar CSS difícil de mantener.

no anides más de 3 niveles salvo que haya una razón muy clara
usa @use en lugar de @import
reserva @extend para casos controlados
no generes utilidades por generar: cada capa extra complica el CSS final
usa SCSS para lo que realmente aporta valor, no para esconder mal CSS

Mini ejemplo real

Este ejemplo junta variables, mixins, estados y reutilización para que se vea un caso más parecido al trabajo diario.

$primary: #2563eb;
$radius: 14px;

@mixin button-base($bg: $primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border: none;
  border-radius: $radius;
  background: $bg;
  color: white;
  font-weight: 700;

  &:hover {
    background: darken($bg, 8%);
  }
}

.btn-primary {
  @include button-base();
}

.btn-secondary {
  @include button-base(#0f172a);
}

Conclusión

SCSS sigue teniendo sentido cuando necesitas reutilización, generación de utilidades y una capa extra de organización sobre CSS.

SCSS sigue siendo una capa muy útil cuando necesitas reutilización, organización, generación de variantes y algo más de lógica en tus estilos. No sustituye al buen CSS, pero puede acelerar bastante cuando el proyecto crece.