Compile LESS to CSS Online — less.js Browser Compiler

Compile one LESS snippet or bundle a local project folder with native @import resolution. Compress output and use source maps for single files — everything runs in your browser.

Loading…
LESS compiler — browser playbook
Compile LESS snippets to standard CSS before minifying or sharing. Runs less.js on demand in your browser.

Developer notes

• Drop a project folder to resolve local @import paths. node_modules, packages and remote URLs are not resolved. • Inline JavaScript in LESS is off by default; enable only if you trust the source. • Strict math requires parentheses around calculations when enabled. • Auto-compile on paste/sample; typed edits need Compile (⌘↵). • Source maps are available for single files and unavailable in bundle mode v1.

Bundle local partials

Choose Bundle project, drop a folder, then select one entry file. FastMinify preserves relative paths and lets Less discover reachable .less files through @import. The browser-local bundle is limited to 32 MiB per file and 32 MiB total. Version 1 has one entry, no source maps and no node_modules package resolution.

Options

Compress
Removes unnecessary whitespace from the compiled CSS output.
Source map
Embeds an inline source map in the CSS output for debugging.
Inline JavaScript
Allows LESS features that evaluate JavaScript expressions — off by default for safety.
Strict math
Requires parentheses around math operations in LESS expressions.

When teams pick this route

• Convert legacy LESS components to CSS for migration. • Preview parametric mixins before integrating into a build. • Share compiled CSS with teammates who do not use LESS. • Quick-check guard expressions and operations.

Worked examples

Variables and operations

LESS input

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

Compiled CSS

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

Parametric mixin

LESS input

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

Compiled CSS

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

Navigate related tools

Beautify LESS with beautify LESS, decompress with unminify LESS, or browse the CSS preprocessors hub.

LESS compiler FAQ

Browser-only compilation

Why can't I use @import for Bootstrap or other libraries?

Project bundles resolve local .less files that you drop into the browser. Paths to node_modules, packages, CDNs or files outside that dropped folder are not available.

What does Strict math do?

When enabled, calculations like 8px + 4px require parentheses. This matches stricter LESS compiler modes used in some build pipelines.

When does compilation run automatically?

On paste and sample load. Typing alone does not trigger compilation — use Compile or ⌘↵.

Is a project bundle the same as concatenating files?

No. Less starts from one entry file and resolves only the @import dependencies it reaches. File order is not manually concatenated. Bundle mode v1 is limited to one entry, 32 MiB total, no source maps and no npm package imports.

CSS preprocessors

Compile SCSS or LESS to standard CSS in the browser — pair with beautify or minify for a full stylesheet workflow.

Explore other tool categories

Minify

Shrink code and assets for production — minify JavaScript, CSS, HTML, JSON and XML before gzip or CDN deploy.

Unminify

Expand minified or compressed code — unminify JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML and other formats when debugging or reviewing.

Conversion

Transform data between JSON, YAML, XML and CSV locally — no server uploads.

Encoding

Encode or decode Base64, URL components and HTML entities — client-side only.

Serialization

Serialize and deserialize PHP data structures beside JSON workflows.

JSON Tools

Validate, format, diff and explore JSON payloads — complementary to minifiers and converters.

SVG Tools

Preview, optimize with SVGO, export Data URI, resize, beautify, convert to JSX and validate SVG — all in your browser.

Beautify

Make code readable with consistent indentation — beautify JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML and more in your browser.

Color & CSS Tools

Paste-local WCAG contrast checking with modern CSS color syntax — pair and matrix views, never uploaded.

DevOps & Infra

Terraform HCL format/validate/minify, Dockerfile format & lint, Docker Compose and .env validation.

CI/CD

GitHub Actions and GitLab CI — format YAML and check workflow/job structure in your browser.

Logs & observability

Line-oriented JSON/NDJSON and Nginx/Apache access logs — format, filter, validate, and CSV/TSV.

Kubernetes

Multi-doc manifests, structural validate, Ingress/Deployment starters, and Helm values formatting.

Networking / IP

CIDR, subnets, and IPv4/IPv6 helpers — in your browser.

Security & tokens

JWKS, X.509 certificates, and secrets scan — browser-local.

API & schemas

OpenAPI tools to format, validate, and lint your specs.

HTTP Tools

Paste-local cURL, HTTP messages, URLs, HAR files, and Cookie / Set-Cookie headers — format and inspect in your browser, never sent.

Developer utilities

Timestamps, UUID, ULID, Nanoid, cron, passwords, regex, slugify, number bases, case, text diff, and chmod — all client-side.

Text & Markdown

Count words, build Markdown TOCs, and clean line lists — all in your browser.

AI & LLM

Token counting, pricing estimates, and context-window fit — 100% browser-local.

Test Data

Synthetic field values for fixtures and DB seed — reserved-range phone numbers first.