CSS to Less Converter
Convert CSS to nested Less online for free — everything runs in your browser.
Local browser processing
No sign-up required
Upload & download supported
ConvertCSSLess (smart nesting)Automatically merges selectors that share a prefix
CSSinput.cssLess
Indent
⌘⏎Quick convert
Input · CSSEditable
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Output · LessCSS valid22 lines · 311 B
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.card {
padding: 8px;
border-radius: 6px;
.title {
font-weight: bold;
&:hover {
color: #BA5A5A;
}
}
.body {
color: #333;
}
> .footer {
border-top: 1px solid #eee;
}
&:hover {
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
&.active {
border-color: #4E8889;
}
}
UTF-8 · Indent: 2 spacesLocal processing · Ready
How It WorksCSS → Less
Overview
This CSS to Less converter analyzes the shared-prefix relationships between selectors in flat CSS and automatically merges them into Less's nested structure, using & to represent compound selectors like pseudo-classes and pseudo-elements — reducing repetition. It's a heuristic style rewrite, not an exact, unambiguous format conversion like JSON to YAML. Everything runs locally in your browser; your data never leaves your device.
Use Cases
Migrate an old project's flat CSS to LessReduce repeated selector prefixesQuickly preview the hierarchy of selectorsOrganize component styles into a clearer structure
Steps
123
Paste or uploadSet optionsGet the result