💠 SASS en React: escribir estilos escalables y mantenibles

💠 SASS en React: escribir estilos escalables y mantenibles

SASS (Syntactically Awesome Style Sheets) es un preprocesador de CSS que amplía sus capacidades con variables, anidamiento, mixins y funciones. En proyectos React, usar SASS facilita la escritura de estilos más organizados, reutilizables y fáciles de mantener a gran escala.

---

1️⃣ Instalación de SASS en un proyecto React

Si usas Create React App, simplemente instala SASS con el siguiente comando:

npm install sass
  

Luego podrás crear archivos con extensión .scss o .sass y usarlos directamente en tus componentes.

---

2️⃣ Ejemplo básico: variables y anidamiento

SASS permite declarar variables para colores, tamaños o fuentes, y anidar selectores para mantener un código más limpio.

/* estilos.scss */
$color-primario: #3498db;
$color-hover: #2980b9;
$radio-borde: 6px;

.boton {
  background-color: $color-primario;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: $radio-borde;
  cursor: pointer;
  transition: 0.3s;

  &:hover {
    background-color: $color-hover;
  }
}
  

// Boton.js
import './estilos.scss';

function Boton() {
  return <button className="boton">Click aquí</button>;
}

export default Boton;
  

---

3️⃣ Mixins y reutilización de estilos

Los mixins en SASS te permiten definir bloques reutilizables de código CSS, que puedes aplicar en varios componentes.

/* mixins.scss */
@mixin tarjeta-base($color-fondo) {
  background-color: $color-fondo;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* tarjetas.scss */
@import './mixins';

.tarjeta {
  @include tarjeta-base(#f4f4f4);
  color: #2c3e50;

  &.tarjeta-azul {
    @include tarjeta-base(#e8f4fd);
  }

  &.tarjeta-verde {
    @include tarjeta-base(#e8fdf1);
  }
}
  

// Tarjeta.js
import './tarjetas.scss';

function Tarjeta({ tipo, titulo }) {
  return <div className={`tarjeta tarjeta-${tipo}`}>{titulo}</div>;
}

export default Tarjeta;

// Uso
<Tarjeta tipo="azul" titulo="Tarjeta Azul" />
<Tarjeta tipo="verde" titulo="Tarjeta Verde" />
  

Tarjeta Azul

Tarjeta Verde

---

4️⃣ Ventajas de usar SASS en React

• ✅ Estructura clara y escalable para proyectos grandes.
• ✅ Reutilización con mixins, variables y funciones.
• ✅ Soporte nativo en Create React App (sin configuración adicional).
• ✅ Perfecta integración con módulos CSS y componentes individuales.

---

5️⃣ Resumen

Usar SASS en React te permite mantener estilos más limpios, escalables y fáciles de mantener. Su integración nativa con React hace que puedas aprovechar todo su poder sin complicaciones.

← Volver al índice