CSS a SCSS Convertidor
Convertir código CSS a SCSS con anidación
CSS de entrada
SCSS convertido
Ejemplos CSS a SCSS
Los selectores CSS planos se convierten en SCSS anidado. Ejemplo:
Estructura anidada desde CSS plano
CSS de entrada:
SCSS convertido:
Usa Ejemplo de arriba para cargar más datos de ejemplo.
¿Qué es CSS a SCSS?
SCSS añade variables, anidación y mixins a CSS. Convertir CSS plano a SCSS lo reestructura con anidación y lo prepara para características SCSS. Esta herramienta analiza tu CSS y genera estructura estilo SCSS. Las especificaciones W3C CSS definen la fuente; Sass define la salida.
La conversión se ejecuta completamente en tu navegador. No se envía nada a ningún servidor. La salida es SCSS válido. Para el reverso (SCSS a CSS), usa SCSS a CSS. Para Less, CSS a Less.
Cómo usar esta herramienta
Pegar o subir CSS
Copia tu CSS y pégalo en el editor izquierdo. También puedes hacer clic en Subir para cargar un archivo .css. El botón Ejemplo carga datos de ejemplo. El CSS inválido mostrará un error.
Revisar la salida SCSS
El panel derecho muestra SCSS convertido. Los selectores pueden anidarse donde la estructura lo permita. Puedes añadir variables y mixins manualmente después de la conversión.
Copiar o descargar
Usa Copiar o Descargar. Compila el SCSS con SCSS a CSS para verificar. Para formatear CSS primero, el Formateador CSS.
Cuándo ayuda CSS a SCSS
Al migrar un proyecto de CSS plano a SCSS, o cuando tienes CSS de una exportación de diseño y quieres integrarlo en una codebase basada en SCSS (p. ej. Bootstrap 4+, Foundation), esta conversión proporciona un punto de partida. Herramientas de build como webpack y Vite compilan SCSS. La salida te da estructura anidada que puedes refinar con variables y mixins.
Herramientas de diseño como Figma suelen exportar CSS plano. Convertir a SCSS aquí te permite añadirlo a una estructura basada en componentes. Para Less en su lugar, CSS a Less. Para prefijos de vendor, el Prefijador CSS.
Preguntas frecuentes
¿Añade variables o mixins?
El convertidor se centra en la estructura (anidación). No extrae automáticamente valores repetidos en variables. Añade variables y mixins manualmente según tus necesidades.
¿Mis datos son privados?
Sí. La conversión se ejecuta completamente en tu navegador. No se envía ningún dato a ningún servidor.
¿Cómo funciona la anidación?
La herramienta infiere la anidación de las relaciones entre selectores. Los selectores complejos pueden permanecer planos. Revisa y ajusta según sea necesario.
¿CSS a SCSS vs CSS a Less?
Ambos producen sintaxis de preprocesador. SCSS es más usado (Bootstrap 4+, muchos frameworks). Less lo usa Bootstrap 3, Ant Design. Elige según tu stack.
¿Puedo compilar la salida?
Sí. Pega el SCSS en SCSS a CSS para compilar y verificar. La salida debería coincidir con tu estructura CSS original.
Herramientas relacionadas
Para Sass/SCSS: sass-lang.com y documentación Sass. W3C CSS y MDN CSS definen el formato fuente. Ver también Bootstrap, Figma, webpack, Vite.