CSS to LESS
Convert flat CSS into nested LESS, live as you type.
.card {
padding: 1rem;
.title {
font-size: 1.25rem;
}
&:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
}Groups rules sharing a base selector into nested LESS, live as you type — handles plain selectors and descendant/pseudo-class combinators. It doesn't understand @media/@supports blocks, comments, or comma-separated selector lists, which are left untouched, and it doesn't generate LESS-specific features like @variables or mixins. Runs entirely in your browser.
Need the opposite? Use CSS to SASS
What is CSS to LESS?
Paste flat CSS and this tool groups rules that share a base selector into nested LESS, turning `.card` and `.card .title` into `.card { .title { ... } }`, live as you type. Useful when migrating a plain-CSS codebase to LESS, or when pulling a stylesheet from somewhere that doesn't use LESS and you want the nested structure as a starting point rather than retyping it by hand. Conversion happens entirely in your browser as you type; nothing is uploaded.
How to Use CSS to LESS
- 1
Paste the Flat CSS: Enter plain CSS with repeated selector prefixes, such as .card and .card .title.
- 2
Read the Nested Result Instantly: The nested LESS appears automatically as you type.
- 3
Copy the Result: Use the copy button to copy the LESS into your project.
How It Works
Selectors are grouped by their base (the first compound selector before a descendant combinator). When one selector is a prefix of another, like `.card` and `.card .title`, the shorter one becomes the outer block and the rest of the longer selector becomes a nested child rule inside it, with the shared prefix removed. Selectors that don't share a base with anything else are left as flat, unnested rules. Comma-separated selector lists, @media/@supports blocks, and comments are passed through unchanged rather than guessed at. LESS and SCSS use the same nesting syntax (including `&` for compound selectors), so the conversion logic is the same as our CSS to SASS tool — only the output is labeled LESS.
Example
The shared `.card .title` prefix collapses into a nested block, and the `:hover` pseudo-class nests one level deeper using `&`.What This Doesn't Handle
This tool only nests selectors — it doesn't generate LESS-specific features like `@variables`, mixins (`.mixin()`), or operations, since none of those exist in the source CSS to convert from. It also leaves comma-separated selector lists (`a, b { }`), `@media`/`@supports` blocks, and comments untouched at the top level rather than risking an incorrect conversion. For a real LESS build pipeline (variables, mixins, functions), a proper LESS compiler is still needed — this is a nesting-structure starting point, not a full preprocessor.
Common Use Cases
Migrating an existing plain-CSS project to LESS without manually re-typing every nested relationship by hand.
Turning a flat stylesheet extracted from a legacy site into a structured starting point for a component-based rewrite in LESS.
Frequently Asked Questions
Common questions about CSS to LESS.