Less a CSS Convertidor
Convertir código Less a CSS listo para navegador
Less de entrada
CSS compilado
Ejemplos Less a CSS
Las variables, mixins y anidación de Less se compilan a CSS plano. Ejemplo:
Variables, mixins y selectores anidados
Less de entrada:
CSS compilado:
Usa Ejemplo de arriba para cargar más datos de ejemplo.
¿Qué es Less a CSS?
Less es un preprocesador CSS que añade variables, anidación, mixins y funciones. Los navegadores no ejecutan Less—necesitan CSS plano. Esta herramienta compila tu Less a CSS listo para navegador. La documentación Less define la sintaxis.
La compilación se ejecuta completamente en tu navegador. No se envía nada a ningún servidor. La salida es CSS estándar. Para el reverso (CSS a Less), usa CSS a Less. Para SCSS, SCSS a CSS.
Cómo usar esta herramienta
Pegar o subir Less
Copia tu Less y pégalo en el editor izquierdo. También puedes hacer clic en Subir para cargar un archivo .less o .css. El botón Ejemplo carga datos de ejemplo. El Less inválido mostrará un error.
Ver el CSS compilado
El panel derecho muestra el CSS compilado. Las variables se resuelven, la anidación se aplana y los mixins se expanden. La salida es CSS plano que cualquier navegador puede usar.
Copiar o descargar
Usa Copiar o Descargar. Para formatear la salida, el Formateador CSS. Para minificar, el Minificador CSS.
Cuándo ayuda Less a CSS
Cuando tienes Less de un proyecto (p. ej. Bootstrap 3, Ant Design) o codebase legacy pero necesitas CSS plano—para una prueba rápida, despliegue CDN o sistema sin herramientas de build—esta compilación ayuda. También útil para depurar: ver exactamente qué CSS produce tu Less.
Less lo usan muchos proyectos antiguos y algunos frameworks UI. Si personalizas variables o extraes estilos, compilar aquí te da el CSS final. Para convertir CSS existente a estructura Less, usa CSS a Less.
Preguntas frecuentes
¿Less vs SCSS?
Ambos añaden variables, anidación y mixins. Less usa & para selectores padre; SCSS también. La sintaxis difiere ligeramente. Elige según tu proyecto.
¿Soporta @import?
Los imports pueden no resolverse si los archivos no se suben. Para proyectos multiarchivo, usa el compilador Less oficial o tu bundler.
¿Mis datos son privados?
Sí. La compilación se ejecuta completamente en tu navegador. No se envía ningún dato a ningún servidor.
¿Qué pasa con mixins y funciones?
Los mixins y funciones incorporadas (p. ej. <code>lighten()</code>, <code>darken()</code>) se expanden durante la compilación. El CSS de salida contiene los valores resueltos.
¿Puedo usar con Bootstrap 3?
Bootstrap 3 usa Less. Para compilación completa de Bootstrap, usa el build oficial. Esta herramienta funciona para Less de un solo archivo o snippets.
Herramientas relacionadas
Para Less: lesscss.org y uso de Less. MDN CSS y W3C CSS definen el formato de salida.