About the CSS to LESS Converter
Plain CSS is valid LESS, so the conversion is about adopting nesting. The tool groups rules whose selectors extend an earlier rule's selector inside that rule, rewriting pseudo-classes and modifier classes with the & parent reference. Everything else is left untouched: declarations, comments, order and at-rules.
Grouping is decided by selector text and by file order. A rule for .card .title moves inside .card, and .card:hover becomes &:hover, but only when the parent rule appears earlier in the stylesheet. Put a base rule below its own variants, as often happens in a file that grew by appending overrides, and the pairing is missed and both rules stay at the top level. Reordering the source first, or running it through CSS Beautifier, gives noticeably better nesting.
Nothing else is invented. No variables are extracted and no mixins are created, because deciding which repeated colour deserves an @brand name is a judgement call a converter cannot make for you. The nesting logic itself is shared with the CSS to SCSS tool, since LESS and SCSS write nesting the same way. Compile the result with LESS to CSS to verify it reproduces the original stylesheet before you commit it.
How to use
- Paste CSS on the left.
- Copy the nested LESS.
- Compile it to check the output matches.
Common questions
- Are LESS variables created?
- No, only nesting is applied. Add @variables by hand where colours and sizes repeat.
- What about selectors with commas?
- Comma-separated selectors are nested only when every part shares the same parent; otherwise they stay top-level.
- Is the output compatible with LESS 3 and 4?
- Yes. Nesting and & have worked the same way since LESS 1.