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