Cambio de SCSS a CSS puro: rápido y sin dolor

CSS está evolucionando rápidamente y alcanzando a los preprocesadores. Ahora el lenguaje en sí ya tiene variables, anidamiento, funciones de color y capas en cascada, que es para lo que se usaba Sass. Así que si todavía tienes SCSS en tu proyecto, tal vez sea hora de cambiar a CSS puro. A continuación se muestra una guía paso a paso sobre cómo hacerlo sin dolor y con placer 💅

✅ Lista de verificación antes de la transición

• 🔍 Realizar una auditoría de la funcionalidad de Sass (variables, mezclas, anidamiento, @extend, bucles)

• 🌐 Comprobar la compatibilidad con los navegadores (para 2025: >90 % de compatibilidad con todas las funciones clave)

• 🎯 Comenzar con las variables: reemplazar $color por --color y usar var(--color)

• 🔁 Reescribir los mixins y las funciones en clases y funciones CSS (calc(), clamp(), etc.)

• ✂️ Eliminar @extend y ciclos — reemplazar con plantillas y propiedades personalizadas

• 📁 Reconstruir las importaciones: usar @import de forma nativa o a través del recopilador

• 🧪 Realizar pruebas: todo debe verse como antes

🎨 Ejemplo 1: Variables

Antes (SCSS):

$primary-color: #3498db;
.button {
  background-color: $primary-color;
}

Ahora (CSS):

:root {
  --primary-color: #3498db;
}
.button {
  background-color: var(--primary-color);
}

🎨 También puedes usar hsl(from var(--color) ...) para reemplazar darken()/lighten().

📦 Ejemplo 2: Anidamiento

SCSS:

.card {
  .header {
    h2 {
      margin: 0;
    }
  }
}

CSS (¡la anidación es compatible de forma nativa!):

.card {
  & .header {
    & h2 {
      margin: 0;
    }
  }
}

🌈 Ejemplo 3: Funciones de color

SCSS: lighten($color, 10%)

CSS:

.primary-light {
  color: hsl(from var(--base-color-hsl) h s calc(l + 10%));
}

O a través de color-mix:

.primary-dark-alt {
  color: color-mix(in srgb, var(--base-color) 85%, black);
}

🧠 Ejemplo 4: Funciones y cálculos

SCSS:

@function calculate-width($cols, $total: 12) {
  @return percentage($cols / $total);
}

CSS:

:root {
  --grid-columns: 12;
}
.column-4 {
  width: calc(4 / var(--grid-columns) * 100%);
}

🧩 Ejemplo 5: Mixinas

SCSS:

@mixin button-style($color) {...}

CSS:

.button {
  color: white;
  background-color: var(--btn-color);
}
.primary-button {
  --btn-color: blue;
}

📱 Ejemplo 6: Consultas de medios y contenedores

SCSS: adjunto @media

CSS: consultas de contenedores:

.sidebar {
  container-type: inline-size;
}
@container (max-width: 768px) {
  .sidebar-item {
    padding: 0.5rem;
  }
}

🧰 ¿Dónde continuar?

¿Quieres estudiar CSS en profundidad y aprender a crear aplicaciones web completas? 📱✨

En la aplicación Kodik puedes tomar cursos de HTML, CSS y JavaScript, aprender diseño y desarrollo de front-end, crear sitios adaptables y animaciones. El curso es adecuado tanto para principiantes como para aquellos que quieren sistematizar sus conocimientos.

• 🧩 Ejercicios prácticos

• 🧪 Pruebas y proyectos

• 📜 Certificados y diplomas

• 🤖 Ayuda del asistente de IA

¡Aprende CSS y conviértete en desarrollador de front-end con Kodik!

🎯 Resumen

Sass ha hecho su trabajo, pero CSS ya no es lo mismo. Ahora puedes escribir estilos potentes y escalables sin preprocesadores. Empiece con un componente y se sorprenderá de lo fácil que es.