Convertir CSS a SCSS (reglas anidadas)

Cómo funciona

Pegue su CSS en el panel izquierdo; la versión anidada aparece enseguida a la derecha. La herramienta divide cada selector en los espacios y en los combinadores > + ~, y anida en un solo bloque las reglas seguidas que empiezan igual. Las seis reglas del ejemplo quedan en dos bloques de primer nivel: .menu ul, .menu li y .menu a entran en el bloque .menu, y .menu a:hover pasa a &:hover dentro del bloque a. Las reglas que están dentro de @media se anidan igual dentro de él, pero el bloque @media nunca se mueve dentro de una regla; así el CSS compilado conserva su orden original. Puede elegir SCSS (con llaves y punto y coma), LESS, Sass con sangría o Stylus; los formatos con sangría no usan llaves ni punto y coma. Los selectores separados por coma (.a, .b) no se dividen. Los comentarios se eliminan y el renglón de resultado dice cuántos eran.

Esta herramienta también se busca como convertir css a scss, css a scss, css a sass, anidar css, css to scss, css to less.

¿Qué es SCSS?

SCSS (Sassy CSS) es la sintaxis del preprocesador Sass que más se parece a CSS. Usa llaves y punto y coma, y añade reglas anidadas, variables que empiezan con $, bloques reutilizables con @mixin y operaciones. Los navegadores no leen SCSS: un compilador de Sass convierte primero el archivo en CSS normal. Todo archivo CSS válido también es un archivo SCSS válido, así que un proyecto existente se puede migrar poco a poco.

¿Qué es Anidado (nesting)?

Anidar es escribir los selectores hijos de un selector dentro de su bloque: .menu { a { } } se compila como .menu a. El signo & representa al selector padre, así que a { &:hover { } } da a:hover. Con esto no se repite el mismo prefijo en cada renglón y la estructura del componente se ve en el código. Anidar demasiado produce selectores largos y muy específicos; lo recomendable es no pasar de tres o cuatro niveles.

¿Qué diferencia hay entre SCSS y Sass?

Las dos son sintaxis del mismo compilador Sass y ofrecen las mismas funciones. SCSS (.scss) usa llaves y punto y coma; quien sabe CSS lo lee de inmediato y todo archivo CSS es SCSS válido. Sass con sangría (.sass) quita llaves y punto y coma y separa los bloques solo con sangría; es más corto, pero un espacio mal puesto cambia el sentido del código. La mayoría de los proyectos nuevos eligen SCSS.

Por qué se conserva el orden de las reglas

Cuando dos reglas CSS aplican al mismo elemento con la misma especificidad, gana la que se escribió al final. Algunos convertidores juntan en un bloque todas las reglas que empiezan con el mismo selector, estén donde estén en el archivo; en el CSS compilado esas reglas cambian de lugar y el color de un botón puede cambiar sin avisar. Esta herramienta solo une reglas seguidas: si entre dos reglas .menu hay otro bloque, la segunda .menu queda como bloque aparte.

Por la misma razón, las reglas @media nunca se mueven dentro de un selector. SCSS lo permite, pero cambia el orden de la salida. Tampoco se deducen variables ni mixins: convertir un color repetido como #1c1917 en una variable como $oscuro lo decide alguien que conoce el sentido del código.

• .menu a { } → .menu { a { } }
• .menu a:hover { } → a { &:hover { } }
• .lista > li { } → .lista { > li { } } (Stylus: & > li)

Qué formato de salida elegir

Si su proyecto usa Sass con archivos .scss, elija SCSS; es la sintaxis más común hoy y todo CSS válido también es SCSS válido. Si sus archivos terminan en .sass, elija Sass con sangría; no tiene llaves ni punto y coma y muestra el anidado solo con la sangría, así que cópielo sin alterar los espacios del inicio.

Si trabaja con un tema antiguo como Bootstrap 3 o con un proyecto en LESS, elija LESS; el anidado se escribe igual que en SCSS. Stylus es una sintaxis con sangría que se usa en algunos proyectos de Node.js; ahí los combinadores anidados se escriben & > li.

Preguntas frecuentes

¿Cómo se convierte CSS a SCSS?

Pegue el CSS en el panel izquierdo. La herramienta divide selectores como .menu a, coloca a dentro del bloque .menu y convierte estados como :hover en &:hover. Como todo CSS válido ya es SCSS válido, cambiarle la extensión al archivo a .scss también funcionaría; lo que agrega la herramienta es la estructura anidada y legible.

¿Cambia mi CSS compilado?

No, las mismas reglas salen en el mismo orden. La herramienta solo une reglas seguidas, deja los bloques @media en su lugar y no divide los selectores separados por coma; así se conservan el orden y el sentido. Solo se eliminan los comentarios.

¿Convierte los colores en variables?

No. El código por sí solo no dice qué color es el de la marca y cuál se repite por casualidad; esa decisión queda en sus manos. En la salida verá los valores repetidos y podrá pasarlos a mano a variables que empiecen con $.

¿Mi código se envía a algún lado?

No. La conversión se hace por completo en su navegador; la hoja de estilos que pega no llega a ningún servidor.