Compilar LESS a CSS en línea — Compilador less.js en el navegador

Compila un fragmento LESS o agrupa una carpeta de proyecto local con resolución nativa de @import. Compresión y source maps de un solo archivo — todo se ejecuta en el navegador.

Cargando…
Compilador LESS — guía del navegador
Compila fragmentos LESS a CSS estándar antes de minificar o compartir. Ejecuta less.js bajo demanda en tu navegador.

Notas para desarrolladores

Arrastra una carpeta de proyecto para resolver rutas locales de @import. node_modules, paquetes y URL remotas no se resuelven. El JavaScript inline en LESS está desactivado por defecto; actívalo solo si confías en la fuente. Strict math exige paréntesis alrededor de los cálculos cuando está activado. Autocompilación al pegar o al cargar un ejemplo; la edición manual requiere Compilar (⌘↵). Las source maps están disponibles en archivos individuales y no en el modo bundle v1.

Agrupar partials locales

Elige Agrupar proyecto, arrastra una carpeta y selecciona un archivo de entrada. FastMinify preserva las rutas relativas y deja que Less descubra archivos .less alcanzables mediante @import. El bundle local en el navegador está limitado a 32 MiB por archivo y 32 MiB en total. La versión 1 admite una sola entrada, sin source maps ni resolución de paquetes node_modules.

Opciones

Comprimir
Elimina espacios innecesarios de la salida CSS compilada.
Source map
Incorpora una source map inline en la salida CSS para depuración.
JavaScript inline
Permite funciones LESS que evalúan expresiones JavaScript — desactivado por defecto por seguridad.
Strict math
Exige paréntesis alrededor de operaciones matemáticas en expresiones LESS.

Cuándo los equipos eligen esta opción

Convertir componentes LESS heredados a CSS para migración. Previsualizar mixins paramétricos antes de integrarlos en un build. Compartir CSS compilado con compañeros que no usan LESS. Verificar rápidamente expresiones de guards y operaciones.

Ejemplos comentados

Variables y operaciones

Entrada LESS

@base: #336699; @gap: 8px + 4px; .panel { color: @base; margin: @gap; }

CSS compilado

.panel { color: #336699; margin: 12px; }

Mixin paramétrico

Entrada LESS

.rounded(@r: 4px) { border-radius: @r; } .btn { .rounded(6px); padding: 8px; }

CSS compilado

.btn { border-radius: 6px; padding: 8px; }

Herramientas relacionadas

Embellece LESS con embellecer LESS, desminifica con desminificar LESS, o explora el hub de preprocesadores CSS.

FAQ del compilador LESS

Compilación solo en el navegador

¿Por qué no puedo usar @import para Bootstrap u otras bibliotecas?

Los bundles de proyecto resuelven los archivos .less locales que arrastras al navegador. Las rutas a node_modules, paquetes, CDN o archivos fuera de la carpeta arrastrada no están disponibles.

¿Qué hace Strict math?

Cuando está activado, cálculos como 8px + 4px requieren paréntesis. Esto coincide con modos de compilador LESS más estrictos usados en algunos pipelines de build.

¿Cuándo se ejecuta la compilación automáticamente?

Al pegar y al cargar un ejemplo. Escribir solo no activa la compilación — usa Compilar o ⌘↵.

¿Un bundle de proyecto es lo mismo que concatenar archivos?

No. Less parte de un archivo de entrada y resuelve solo las dependencias @import que alcanza. El orden de los archivos no se concatena manualmente. El modo bundle v1 está limitado a una entrada, 32 MiB en total, sin source maps ni importaciones de paquetes npm.

Preprocesadores CSS

Compila SCSS o LESS a CSS estándar en el navegador — combínalo con embellecer o minificar para un flujo de hoja de estilos completo.

Explorar otras categorías de herramientas