CSS to Less Converter
Convert CSS code to Less with nesting
Input CSS
Converted Less
CSS to Less Examples
Flat CSS selectors are converted to nested Less. Example:
Nested structure from flat CSS
Input CSS:
Converted Less:
Use Sample above to load more example data.
What Is CSS to Less?
Less is a CSS preprocessor that adds variables, nesting, and mixins. Converting plain CSS to Less restructures it with nesting and prepares it for Less features. This tool analyzes your CSS and outputs Less-style structure. The W3C CSS specifications define the source; Less defines the output.
Your stylesheet is restructured by script running on this page; the rules you paste are not uploaded. What comes out is valid Less you can compile straight away. For the reverse (Less to CSS), use Less to CSS. For SCSS, use CSS to SCSS.
How to Use This Tool
Paste or Upload CSS
Copy your CSS and paste it into the left editor. You can also click Upload to load a .css file. The Sample button loads example data. Invalid CSS will show an error.
Review the Less Output
The right panel shows converted Less. Selectors may be nested where structure allows. You can add variables and mixins manually after conversion.
Save the .less Version
Take the result with Copy or save a .less file with Download. Compile the Less with Less to CSS to verify. For formatting CSS first, use the CSS Formatter.
When CSS to Less Helps
When migrating a project from plain CSS to Less, or when you have CSS from a design export and want to integrate it into a Less-based codebase (e.g. Bootstrap 3, Ant Design), this conversion provides a starting point. Build tools like webpack and Gulp compile Less. The output gives you nested structure you can refine with variables and mixins.
Design tools often export plain CSS. Converting to Less here lets you add it to a component-based structure. For SCSS instead, use CSS to SCSS. For vendor prefixes, use the CSS Prefixer.
Frequently Asked Questions
Does it add variables or mixins?
The converter focuses on structure (nesting). It doesn't automatically extract repeated values into variables. Add variables and mixins manually based on your needs.
Is my data private?
Yes. The nesting is worked out in this browser tab, so selectors, class names and colour values from an unreleased design never reach a server.
How does nesting work?
The tool infers nesting from selector relationships (e.g. .parent .child becomes nested). Complex selectors may remain flat. Review and adjust as needed.
Less vs SCSS?
Both add variables, nesting, and mixins. Less is used by Bootstrap 3, Ant Design. SCSS is used by Bootstrap 4+, many modern frameworks. Choose based on your stack.
Can I compile the output?
Yes. Paste the Less into Less to CSS to compile and verify. The output should match your original CSS structure.
Related Tools
For Less, see lesscss.org. W3C CSS and MDN CSS define the source format. Bootstrap. webpack. Figma.