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

Minificar

Reduce código y assets para producción — minifica JavaScript, CSS, HTML, JSON y XML antes de gzip o un despliegue CDN.

Embellecer

Haz el código legible con una indentación coherente — embellece JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML y más en tu navegador.

Desminificar

Expande código minificado o comprimido — desminifica JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML y otros formatos al depurar o revisar.

Conversión

Transforma datos entre JSON, YAML, XML y CSV en local — sin subidas a un servidor.

Herramientas JSON

Valida, formatea, compara y explora payloads JSON — complementarias a minificadores y convertidores.

Herramientas SVG

Previsualiza, optimiza con SVGO, exporta Data URI, redimensiona, embellece, convierte a JSX y valida SVG — todo en tu navegador.

DevOps e Infra

Formato, validación y minificación de Terraform HCL, formato y lint de Dockerfile, validación de Docker Compose y .env.

CI/CD

GitHub Actions y GitLab CI — formatear YAML y comprobar la estructura de workflows/jobs en el navegador.

Logs y observabilidad

JSON/NDJSON línea a línea y access logs de Nginx/Apache — formato, filtro, validación y CSV/TSV.

Kubernetes

Manifiestos multi-doc, validación estructural, starters Ingress/Deployment y formato de values de Helm.

Red / IP

CIDR, subredes y ayudas IPv4/IPv6 — en tu navegador.

Seguridad y tokens

JWKS, certificados X.509 y escaneo de secretos — en local en el navegador.

API y esquemas

Herramientas OpenAPI para formatear, validar y analizar tus specs.

Codificación

Codifica o decodifica Base64, componentes URL y entidades HTML — solo en el cliente.

Utilidades para desarrolladores

Timestamps, UUID, ULID, Nanoid, cron, contraseñas, regex, slugify, bases numéricas, mayúsculas, diff de texto y chmod — todo en el cliente.

Texto y Markdown

Cuenta palabras, genera TOC Markdown y limpia listas de líneas — todo en tu navegador.

IA y LLM

Conteo de tokens, estimación de costes y ajuste a la ventana de contexto — 100 % en el navegador.

Datos de prueba

Valores de campo sintéticos para fixtures y seed de BD — primero números de teléfono en rangos reservados.

Serialización

Serializa y deserializa estructuras PHP junto a los flujos JSON.