SASS: Preprocesador CSS

SASS (Syntactically Awesome Style Sheets) es un preprocesador que extiende CSS con superpoderes: variables dinámicas ($color-primario), anidamiento de selectores para reflejar la estructura HTML, mixins reutilizables (funciones de estilos), herencia con @extend y partials para dividir el código en archivos organizados. Se compila a CSS normal que el navegador entiende.

SASS usa la extensión .scss (sintaxis con llaves, compatible con CSS) o .sass (sintaxis con indentación). En proyectos profesionales se usa .scss. Para compilar puedes usar: npm install -D sass y ejecutar npx sass src/styles:dist/css o integrarlo con tu bundler (Vite, Webpack). Los partials son archivos que empiezan con _ (como _variables.scss) y se importan con @use.

// _variables.scss — Variables y funciones reutilizables
$color-primario: #00E5A0;
$color-fondo: #0A0F1E;
$radio-borde: 12px;
$breakpoint-mobile: 768px;

// _mixins.scss — Bloques reutilizables
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin responsive($breakpoint) {
  @media (max-width: $breakpoint) {
    @content;  // aqui se inyecta el contenido
  }
}

// estilos.scss — Uso real
@use 'variables' as v;
@use 'mixins' as m;

.tarjeta {
  background: v.$color-fondo;
  border-radius: v.$radio-borde;
  padding: 2rem;

  // Anidamiento — refleja el HTML
  &__titulo {
    color: v.$color-primario;
    font-size: 1.5rem;
  }

  &__boton {
    @include m.flex-center;  // aplica el mixin
    background: v.$color-primario;

    &:hover {
      opacity: 0.8;
    }
  }

  // Responsive dentro del componente
  @include m.responsive(v.$breakpoint-mobile) {
    padding: 1rem;
  }
}