CSS to LESS
Paste CSS and get clean, consistently formatted LESS output using Prettier's LESS parser.
Example
Minified CSS in:
.box{color:#FF0000;margin:0;padding:10px 20px}Formatted LESS out:
.box {
color: #ff0000;
margin: 0;
padding: 10px 20px;
}How it works
Because every valid CSS file is also valid LESS, this tool runs your input through Prettier with the `less` parser to produce tidy, 2-space-indented LESS. Everything happens client-side.
Good to know
CSS to LESS takes any block of CSS you paste in and returns it as clean, consistently formatted LESS, using Prettier's less parser entirely inside your browser. Because every valid CSS file is also valid LESS syntax, the tool's real job is normalization and formatting rather than translation: it indents with two spaces, lowercases hex colors, and applies uniform spacing so the result drops straight into a .less file. It's aimed at front-end developers migrating a stylesheet into a LESS build pipeline, or anyone who wants to tidy minified or messy CSS.
Reach for it when you've inherited compressed or hand-edited CSS and want a readable starting point before you add LESS-specific features yourself, or when you're standardizing a codebase and need consistent formatting across files. It's also handy for a quick sanity check: if the tool throws a parse error, your CSS likely has a real syntax problem worth fixing.
Read the output as a faithful, reformatted copy of your input, not a rewrite. The selectors, properties, and values keep the same meaning; only whitespace, indentation, and color casing change. What you will not see is any automatically generated LESS sugar.
- No variables (
@color) created from repeated values - No mixins extracted from shared rule sets
- No nesting inferred from descendant selectors
One practical caveat: those LESS features are exactly what makes LESS worth using, so treat this tool as step one. After formatting, manually introduce variables, nesting, and mixins to take advantage of the preprocessor. Also note the page must finish loading the Prettier library before it can format, so on a slow connection you may need to click Convert again a moment later.
Frequently asked questions
Does this convert CSS into LESS features like variables and mixins?
No. CSS is already valid LESS, so this tool simply formats your CSS as clean LESS. It does not auto-generate variables, mixins, or nesting from flat CSS.
Why does my output keep the same colors but lowercase them?
Prettier normalizes hex colors to lowercase and applies consistent spacing and indentation. The styles are unchanged in meaning, just formatted consistently as LESS.
Is my data uploaded anywhere?
No — this tool runs entirely in your browser. Your input never leaves your device and it works offline once loaded.
Is it free?
Yes, completely free with no sign-up and no limits.
People also ask
Is CSS valid LESS?
Yes. LESS is a superset of CSS, so any valid CSS file is also valid LESS and can be saved with a .less extension without changes. That is why this tool can format CSS as LESS without rewriting any rules.
What is the difference between LESS and SCSS?
Both are CSS preprocessors that add variables, nesting, and mixins, but they differ in syntax and tooling: LESS uses the @ prefix for variables and was originally JavaScript-based, while SCSS (the newer Sass syntax) uses the $ prefix and is typically compiled with Dart Sass. Their feature sets overlap heavily, so the choice is often about ecosystem and team preference.
How do I convert plain CSS into LESS variables and mixins?
There is no fully automatic, reliable way to do this; it requires human judgment about which values should become variables and which rules should be shared as mixins. This tool formats CSS as LESS, after which you manually replace repeated values with @variables and group shared declarations into mixins.
Does formatting CSS as LESS change how my styles render?
No. Formatting only adjusts whitespace, indentation, and the casing of hex colors, none of which affect how a browser interprets the rules. The compiled result is visually identical to the original CSS.
Can I nest selectors when converting CSS to LESS?
LESS supports nesting, but flat CSS does not contain nesting information, so it cannot be inferred automatically. You add nesting yourself by placing child rules inside their parent selector block after formatting.
Why are my hex colors lowercased in the output?
Prettier, the formatter behind this tool, normalizes hex color codes to lowercase as part of its consistent styling. #FF0000 and #ff0000 are exactly the same color, so this is a cosmetic change only.
Do I still need a LESS compiler after using this tool?
Yes, if you want to use LESS features. This tool produces a formatted .less file, but you still need a compiler such as lessc or a build-tool plugin to turn LESS (including any variables or mixins you add) back into browser-ready CSS.
Is it safe to paste proprietary CSS into this converter?
The tool runs entirely client-side in your browser and does not upload your input to any server, and it works offline once loaded. Your CSS never leaves your device during conversion.
Related tools