Convertir LESS a CSS

Cómo funciona

Un tema antiguo de Bootstrap 3 o una plantilla de WordPress suele estar escrito en LESS, y el navegador no lee LESS: primero hay que compilarlo a CSS normal. Pegue el código en el cuadro izquierdo. A la derecha, las variables como @color-principal se reemplazan por su valor, las llamadas a mixins como .sombra(8px) por las reglas que contienen, las reglas anidadas se convierten en selectores como .tarjeta h2 y las funciones de color como darken(@color-principal, 10%) se calculan y dan un código de color como #08427d. También se resuelven operaciones como (@espacio / 2): la mitad de 16px da 8px. La salida legible lleva sangría de 2 espacios; con Minificada se quitan espacios y comentarios y el CSS queda en una línea. Si el código usa una variable sin definir o deja una llave abierta, no se compila nada y verá la línea y la columna del problema. La línea de resultado indica cuántas líneas de LESS dieron cuántas líneas de CSS y el tamaño en bytes. El contenido que llega con @import desde otro archivo no alcanza esta página; pegue también el texto de ese archivo.

Esta herramienta también se busca como convertir less a css, less to css, compilador less online, compilar less online, less a css, lessc online.

¿Qué es LESS?

LESS (Leaner Style Sheets) es un lenguaje preprocesador que agrega a CSS variables, mixins, reglas anidadas y funciones de color. Apareció en 2009; Bootstrap 3 y miles de temas basados en él se escribieron en LESS. El navegador no lee un archivo .less directamente: un compilador cambia las variables por sus valores, despliega las reglas anidadas y produce un archivo .css normal.

¿Qué es Mixin?

En LESS, un mixin es un grupo de reglas con nombre que se reutiliza dentro de otras reglas: .sombra(@profundidad) { box-shadow: ... } se escribe una vez y luego se llama con .tarjeta { .sombra(8px); }. Al compilar, la llamada se reemplaza por las propiedades del mixin, completadas con los valores que se pasaron. No hace falta escribir diez veces la misma sombra para usarla en diez lugares.

¿Cuál es la diferencia entre LESS y SCSS?

Los dos son preprocesadores que agregan variables, mixins y reglas anidadas a CSS, y hacen el mismo trabajo; la diferencia está en la sintaxis y el ecosistema. LESS escribe las variables con @ (@color), SCSS con $ ($color). En LESS un mixin se llama como una clase común (.sombra();), en SCSS hacen falta @mixin e @include. Bootstrap 3 usaba LESS, Bootstrap 4 y posteriores pasaron a SCSS; por eso hoy LESS aparece sobre todo en temas y proyectos antiguos.

¿Por qué no se compilan mis archivos con @import?

Esta página compila solo el texto que pega; no puede leer otros archivos de su dispositivo ni de un servidor, porque su código no se envía a ningún lugar. Por eso una línea como @import "variables.less" da un error de archivo que no se puede leer. La solución es sencilla: copie el contenido del archivo importado y péguelo en lugar de la línea @import. Para un proyecto de muchos archivos como Bootstrap, use el comando de compilación del proyecto (lessc).

Una importación de CSS escrita con url(...), como una dirección de Google Fonts, no se compila, pero pasa igual a la salida; el navegador la carga al abrir la página. El JavaScript en línea (expresiones entre acentos graves) está desactivado por defecto en less 4 y tampoco se ejecuta aquí.

¿Legible o minificada?

La salida legible sirve para revisar el CSS compilado, ver de dónde sale una regla o dejar LESS y seguir con CSS normal. La salida minificada es para el archivo del sitio publicado: se quitan espacios y comentarios y el archivo pesa menos.

Si va a dejar LESS, tome la salida legible. Los valores reemplazan a las variables; cambiar un color más adelante significa editar varias líneas. Las variables de CSS (--color-principal) son un buen reemplazo para eso.

• Ver el código compilado, pasar de LESS a CSS normal → Legible
• Subir al sitio publicado → Minificada
• Proyecto de Bootstrap con muchos archivos → comando lessc del proyecto

Preguntas frecuentes

¿Cómo convierto un archivo LESS a CSS?

Copie el contenido del archivo .less y péguelo en el cuadro izquierdo de esta página. El CSS compilado aparece a la derecha; puede copiarlo o descargarlo como archivo .css. Si el archivo importa otros archivos .less, agregue también su contenido al texto.

¿Qué significa "la variable no está definida"?

Una @variable que usa el código no está declarada en el mismo texto. Las variables suelen estar en un archivo aparte (como variables.less) que se carga con @import; pegue también su contenido y el error desaparece.

¿También puedo compilar SCSS o Sass?

No. SCSS tiene otra sintaxis ($variable, @include) y necesita otro compilador. Esta página solo compila LESS; si solo quiere dar sangría a SCSS, la herramienta para formatear CSS lo hace.

¿Mi código se envía a un servidor?

No. La compilación se hace por completo en su navegador; el código que pega no sale de esta página y no se guarda en ningún lugar.