CSS a Less Convertidor
Convertir código CSS a Less con anidación
CSS de entrada
Less convertido
Ejemplos CSS a Less
Los selectores CSS planos se convierten en Less anidado. Ejemplo:
Estructura anidada desde CSS plano
CSS de entrada:
Less convertido:
Usa Ejemplo de arriba para cargar más datos de ejemplo.
¿Qué es CSS a Less?
Less es un preprocesador CSS que añade variables, anidación y mixins. Convertir CSS plano a Less lo reestructura con anidación y lo prepara para características Less. Esta herramienta analiza tu CSS y genera estructura estilo Less. Las especificaciones W3C CSS definen la fuente; Less define la salida.
La conversión se ejecuta completamente en tu navegador. No se envía nada a ningún servidor. La salida es Less válido. Para el reverso (Less a CSS), usa Less a CSS. Para SCSS, CSS a SCSS.
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 Less
El panel derecho muestra Less 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 Less con Less a CSS para verificar. Para formatear CSS primero, el Formateador CSS.
Cuándo ayuda CSS a Less
Al migrar un proyecto de CSS plano a Less, o cuando tienes CSS de una exportación de diseño y quieres integrarlo en una codebase basada en Less (p. ej. Bootstrap 3, Ant Design), esta conversión proporciona un punto de partida. Herramientas de build como webpack y Gulp compilan Less. La salida te da estructura anidada que puedes refinar con variables y mixins.
Las herramientas de diseño suelen exportar CSS plano. Convertir a Less aquí te permite añadirlo a una estructura basada en componentes. Para SCSS en su lugar, CSS a SCSS. 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 (p. ej. .parent .child se anida). Los selectores complejos pueden permanecer planos. Revisa y ajusta según sea necesario.
¿Less vs SCSS?
Ambos añaden variables, anidación y mixins. Less lo usa Bootstrap 3, Ant Design. SCSS lo usa Bootstrap 4+, muchos frameworks modernos. Elige según tu stack.
¿Puedo compilar la salida?
Sí. Pega el Less en Less a CSS para compilar y verificar. La salida debería coincidir con tu estructura CSS original.
Herramientas relacionadas
Para Less: lesscss.org. W3C CSS y MDN CSS definen el formato fuente. Bootstrap. webpack. Figma.