浏览器本地处理
无需登录
支持上传与下载
转换CSSLess(智能嵌套)自动合并共享前缀的选择器
CSSinput.cssLess
缩进
⌘⏎快速转换
输入 · CSS可编辑
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
输出 · LessCSS 有效22 行 · 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 · 缩进:2 空格本地处理 · 就绪
工具说明CSS → Less
简介
这个 CSS 转 Less 工具会分析平铺 CSS 中选择器共享的前缀关系,自动合并成 Less 的嵌套结构,并用 & 表示伪类、伪元素等复合选择器,减少重复书写。这是一种启发式的风格重排,不是像 JSON 转 YAML 那样精确无歧义的格式转换。所有处理都在浏览器本地完成,数据不会离开你的设备。
场景
把旧项目的平铺 CSS 迁移到 Less减少重复选择器前缀快速预览选择器的层级关系为组件样式整理出更清晰的结构
使用步骤
123
粘贴或上传设置选项获取结果