Convertir LESS a CSS Online
Compila código LESS a CSS puro en tu navegador. Sin npm, sin Node.js, sin configuración.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Compilador LESS a CSS
¿Por qué usar este compilador LESS?
Sin configuración
Sin npm, sin webpack, sin Grunt. Pega tu código LESS y obtén CSS al instante.
less.js oficial
Usa el compilador oficial less.js ejecutado en WebAssembly. Máxima compatibilidad.
Privacidad total
Tu código LESS no se envía a ningún servidor. Todo ocurre en tu navegador.
Proyectos Bootstrap 3
Compila fácilmente temas de Bootstrap 3 y otros proyectos legacy basados en LESS.
Cómo funciona
Tres pasos, sin complicaciones
Pega tu código LESS
Escribe o pega tu código LESS en el editor. Variables @, anidamiento, mixins y operaciones matemáticas son compatibles.
Compilación instantánea
El CSS resultante aparece automáticamente. El compilador LESS.js se ejecuta localmente en tu navegador.
Copia o descarga el CSS
Copia el CSS al portapapeles o descárgalo como archivo .css listo para usar.
Preguntas frecuentes
¿Tienes dudas?
LESS (creado por Alexis Sellier, alias 'cloudhead', en 2009) y SCSS (parte de Sass, creado en 2006) son preprocesadores CSS con filosofías diferentes. La diferencia más visible es la sintaxis de variables: LESS usa @ (el mismo prefijo que las reglas at-rules de CSS como @media, lo que puede causar confusión), mientras que SCSS usa $. LESS se diseñó para ser procesado tanto en el cliente (navegador, vía less.js) como en el servidor, algo que Sass no planteó inicialmente. SCSS tiene un ecosistema más rico (Compass, Bootstrap 4+, Angular) y el compilador oficial Dart Sass. LESS sigue siendo relevante principalmente por la base de proyectos que usaron Bootstrap 3 y por su compilador JavaScript nativo (less.js) que facilita el procesamiento en el navegador.
Las variables en LESS se definen con @nombre: valor; y se usan directamente en el código: @color-base: #4d90fe; @fuente: 'Roboto', sans-serif; color: @color-base. Una característica peculiar de LESS es el lazy evaluation: las variables pueden usarse antes de ser declaradas en el mismo scope, ya que LESS procesa todo el archivo antes de resolver valores. Esto contrasta con SCSS donde las variables siguen un orden de declaración más estricto. Las variables LESS también pueden ser interpoladas en selectores y nombres de propiedades usando la sintaxis @{nombre}.
Los mixins en LESS se definen como clases CSS normales y se invocan con la misma sintaxis: .mixin() define el mixin y .mixin() dentro de otra regla lo incluye. No existe una palabra clave @mixin como en SCSS. Esto tiene una consecuencia importante: cualquier clase CSS existente puede ser usada como mixin simplemente llamándola. Los mixins con parámetros usan la sintaxis .mixin(@param: valor-defecto). LESS también soporta guardias (guards) en mixins: .mixin(@a) when (@a > 10) { ... } para compilación condicional, una característica que SCSS implementa con @if.
No. Bootstrap 3 (2013) fue la gran adopción masiva de LESS, convirtiéndolo en el preprocesador más conocido por una generación de desarrolladores web. Bootstrap 4 (2018) migró completamente a SCSS (Sass), y Bootstrap 5 (2021) continuó con SCSS. La migración de Bootstrap fue uno de los factores que consolidó SCSS como el preprocesador dominante en el ecosistema moderno. Si tienes un proyecto legacy con Bootstrap 3, esta herramienta puede ayudarte a extraer el CSS compilado sin necesidad de mantener un entorno de compilación LESS.
La herramienta compila el código LESS que introduces directamente, pero no puede resolver referencias a archivos externos mediante @import ya que opera en el navegador sin acceso al sistema de archivos. Si tienes múltiples archivos LESS, puedes concatenarlos manualmente antes de compilar. Para proyectos con estructura modular compleja, sigue siendo necesario un entorno de compilación local con less.js o la integración de LESS en tu bundler (webpack, Vite, Parcel).
LESS sigue siendo necesario en tres contextos principales: mantenimiento de proyectos legacy con Bootstrap 3 o temas de WordPress/Magento/Drupal que usan LESS; extracción de CSS de fragmentos LESS encontrados en código heredado para migrarlo a CSS nativo o SCSS; y aprendizaje de la sintaxis LESS para trabajar con o en bases de código existentes. Para proyectos nuevos, la recomendación actual es SCSS/Sass o directamente CSS moderno con custom properties y @layer.
LESS a CSS online: compila LESS sin npm ni Node.js, ideal para proyectos Bootstrap 3
LESS es un lenguaje de preprocesamiento de CSS creado por Alexis Sellier (conocido en internet como 'cloudhead') y publicado en 2009 como software open source bajo licencia Apache. Sellier lo escribió originalmente en Ruby, pero la reescritura en JavaScript (less.js) por parte del propio autor en 2010 fue el momento que definió su popularidad: por primera vez, un preprocesador CSS podía ejecutarse directamente en el navegador cargando el archivo .less y la librería less.js vía etiqueta <script>. Esta capacidad de compilación en el cliente, aunque raramente usada en producción por razones de rendimiento, democratizó el acceso al preprocesamiento CSS sin necesidad de infraestructura de compilación. Las características principales de LESS son su herencia directa de CSS (cualquier CSS válido es LESS válido), las variables con prefijo @ (@color: #fff), el anidamiento de selectores con comportamiento idéntico al de SCSS, los mixins como clases invocables (.mixin()), las operaciones aritméticas directas en valores (margin: @base * 2), y las funciones de color integradas (lighten, darken, mix, etc.).
El momento de mayor impacto de LESS en el ecosistema web fue la adopción por parte de Bootstrap, el framework de UI más popular del mundo. Bootstrap 2 (2012) y Bootstrap 3 (2013, lanzado en agosto) usaron LESS como sistema de personalización y compilación, exponiendo a millones de desarrolladores web a la sintaxis de LESS a través del sistema de variables y mixins del framework. Los temas de Bootstrap 3 se distribuían como colecciones de archivos .less con variables personalizadas que compilaban el CSS final. Esta integración convirtió LESS en el preprocesador más conocido durante el período 2013-2018, aunque SCSS ya era técnicamente más rico y tenía mayor adopción en la comunidad de desarrolladores de Ruby y Angular. La decisión de Bootstrap 4 (versión alpha en 2015, lanzamiento estable en enero de 2018) de migrar a SCSS supuso el punto de inflexión definitivo: proyectos nuevos pasaron a SCSS y LESS quedó principalmente asociado a mantenimiento de proyectos legacy.
La necesidad de un compilador LESS online en 2024 se concentra principalmente en tres escenarios de mantenimiento y migración. El primero es el ecosistema legacy de Bootstrap 3: aunque Bootstrap 5 lleva años disponible, muchas aplicaciones empresariales y sitios de WordPress siguen usando temas basados en Bootstrap 3 con personalizaciones en LESS. Cuando necesitas extraer el CSS compilado de un fragmento concreto o verificar el output de una variable o mixin, hacerlo online es más rápido que mantener un entorno de compilación. El segundo escenario es la migración de LESS a SCSS o CSS moderno: entender qué CSS genera un bloque LESS específico es el primer paso para reescribirlo en SCSS o con custom properties nativas. El tercer escenario es el mantenimiento de temas de Magento (que usa LESS extensivamente en su sistema de temas para Magento 2), ciertos temas de Drupal, y aplicaciones construidas sobre frameworks internos que adoptaron LESS en el período 2012-2017. Convertir.ai ejecuta el compilador less.js oficial en tu navegador sin enviar ninguna línea de código a servidores externos.