Write Less CSS with variables, mixins, and functions and see compiled CSS output instantly.
Less CSS Playground turns a Less snippet into the CSS a browser can consume. Paste declarations using @ variables, nested selectors, mixins, arithmetic, or Less functions, and compare the compiled stylesheet with the source as you edit. It is particularly useful for seeing expansion: one nested block or mixin can emit several ordinary CSS rules. A common surprise is that Less variables such as @space disappear from the result. They are compile-time values, unlike CSS custom properties such as --space, which can remain in CSS and change in the browser.
A concrete input and expected output from the current implementation.
Input
@space: 4px;
.panel {
padding: (@space * 3);
&:hover {
padding: (@space * 4);
}
} Expected output
.panel {
padding: 12px;
}
.panel:hover {
padding: 16px;
} The @space variable resolves to 4px, so multiplication produces 12px and 16px. The nested &:hover selector expands by replacing & with its parent selector, .panel.
For valid input, the playground resolves Less constructs and emits ordinary CSS text. Variable references are substituted, nested selectors are expanded, included mixins contribute their declarations, and evaluable expressions become values. A construct that already belongs to CSS may pass through instead of becoming a Less calculation. The result is the compiled stylesheet, not a reformatted copy of the Less source.
Selector expansion follows the nesting written in the snippet. The parent selector marker &, when used inside a rule, is joined to the enclosing selector, so &:hover under .panel becomes .panel:hover. Parentheses make intended arithmetic clear, and compatible numeric operands can be evaluated before emission. Reviewing the resulting selectors and values is often more informative than merely seeing whether the snippet compiles.
No. A Less variable such as @gap is resolved while the source is compiled and normally does not appear in the CSS. A custom property such as --gap is CSS syntax and can be read with var(--gap) at browser runtime. Use @ variables for preprocessing; use custom properties when the value must participate in the live cascade or change without recompiling.
Yes, if the snippet compiles and the emitted rules are the rules you intend. The result is CSS rather than Less. However, the playground does not establish whether those declarations suit your target browsers, whether project imports supplied missing definitions, or whether your production compiler uses identical settings. Check the result in the actual page and build before relying on it.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.