Guía de uso
Con esta herramienta puedes convertir CSS a SCSS sin reescribir nada a mano: agrupa las reglas consecutivas que empiezan por el mismo selector padre, de modo que .tarjeta img pasa al interior de .tarjeta y .tarjeta:hover se convierte en &:hover. Las reglas no cambian de orden, así que el resultado compilado se comporta igual que tu CSS original. Todo ocurre en tu navegador.
Cómo convertir CSS a SCSS
- Pega tu CSS en el campo de entrada; puede estar minificado.
- Pulsa el botón de ejecutar o Ctrl + Enter para anidar las reglas.
- Revisa el resultado y apunta los valores repetidos que merezcan una variable.
- Guarda la salida en un archivo con extensión
.scss.
Ejemplo: la tarjeta de un producto
Partimos de cinco reglas: .tarjeta{padding:1rem}, .tarjeta img{width:100%}, .tarjeta:hover{box-shadow:...}, .tarjeta p{margin:0} y .boton{color:#fff}. Las cuatro primeras forman un único bloque .tarjeta que contiene, por este orden, su propia declaración padding: 1rem;, un bloque img, un bloque &:hover y un bloque p. .boton empieza por otro selector y queda aparte. El orden interno respeta el del archivo original, y el combinador de hijo directo también se conserva: .tarjeta>img aparecería como > img.
Qué se agrupa y qué no
| Situación | Resultado |
|---|---|
| Reglas seguidas con el mismo selector inicial | Se anidan en un único bloque |
| Otra regla en medio | No se agrupan |
| El padre vuelve a aparecer después de sus hijos | Se abre un bloque nuevo |
Listas con coma, como .hero,.banner | Se dejan tal cual |
Bloques @media | Mantienen su posición; sus reglas internas se anidan entre sí |
Clases compuestas o BEM, como .boton.activo o .tarjeta__titulo | Cuentan como selectores distintos; no se genera &.activo ni &__titulo |
Por qué solo se anidan reglas vecinas
En CSS, cuando dos reglas con la misma especificidad afectan al mismo elemento, gana la que aparece después. Reunir en un bloque reglas de .tarjeta .titulo repartidas por el archivo obliga a mover alguna por delante o por detrás de otras. Si entre ellas hay una regla como .caja .titulo, con la misma especificidad, un título que esté dentro de una tarjeta y de una caja a la vez podría cambiar de color. La herramienta no corre ese riesgo: solo une lo que ya estaba junto. El resultado puede parecer menos anidado de lo esperado, pero compila a un CSS con la misma cascada.
Lo que conviene terminar a mano
- Variables: lleva los colores y espaciados repetidos, como
#8f39e8, a variables del tipo$color-marca. La herramienta no crea variables, porque no puede saber si dos valores iguales significan lo mismo. - Mixins: agrupa en un
@mixinlas consultas de medios o los patrones de alineación que se repiten. - BEM y estados: si te gusta ese estilo, reescribe
.tarjeta__titulocomo&__titulo. - Profundidad: los selectores largos generan anidaciones profundas; se suele recomendar no pasar de tres niveles.
Si el archivo de partida es un caos, pásalo antes por formatear CSS: comparar el antes y el después será mucho más fácil.
¿Cuándo compensa? Al migrar a SCSS una hoja de estilos heredada que ha crecido durante años, al incorporar estilos copiados de una plantilla o de las herramientas para desarrolladores del navegador, y antes de dividir un archivo grande en parciales, porque la anidación muestra qué reglas pertenecen a cada componente.
Privacidad y herramientas relacionadas
La conversión se ejecuta con JavaScript en tu navegador; la hoja de estilos no se envía al servidor y la página solo suma un contador de uso anónimo. Para ver en qué CSS se convierte tu SCSS, usa el conversor de SCSS a CSS. Tienes más utilidades en herramientas para desarrolladores.