跳转到正文

SCSS 格式化工具

使用这款 SCSS 格式化工具,整理 Sass SCSS 样式表。粘贴 SCSS,工具会排版嵌套规则、变量、混入、包含、父选择器和控制指令,采用两个空格缩进、每条声明单独占一行、属性冒号后留空格,并为缺少分号的声明补上分号。插值和注释都会保留,前端开发者无需编译即可整理局部样式文件和代码片段。

重置

常见问题

SCSS 格式化工具如何工作?

它会将样式表读取为花括号、分号、冒号、字符串和注释等标记,并据此重新构建布局。每个左花括号都会开启一个缩进区块,每条声明则单独占一行。

支持嵌套吗?

支持。嵌套规则和 &:hover 之类的父选择器会比父级多缩进一级,每级两个空格。选择器中的冒号会保持相连,因此 &:hover 不会被拆开。

变量、混入和包含语句如何格式化?

$color: #333; 之类的变量定义会在冒号后加空格,@mixin 和 @include 会保留参数,并在每个逗号后加空格。@if、@each 和 @for 之类的控制指令会在左括号前加空格。

插值会保留吗?

会。#{$name} 之类的插值会按原样复制。这也包括选择器中的插值,例如 .icon-#{$name},以及属性名中的插值。

工具会编译或验证我的 SCSS 吗?

不会,它不会编译为 CSS,也不会检查语法,因此也能格式化不完整的代码片段。请使用 Sass 编译器查找错误并生成 CSS。

注释会保留吗?

会。以 // 开头的行注释会在该行末尾结束,块注释则会保留在原位置。

它支持缩进式的 Sass 语法吗?

不支持,它专为使用花括号和分号的 SCSS 构建。缩进式 .sass 语法文件没有可用于确定缩进的花括号,因此请先将它们转换为 SCSS。

可以更改缩进吗?

不支持,输出始终使用两个空格缩进,格式化工具也没有选项。因此,相同的样式表每次都会得到相同的结果。

为什么结果使用 scss 代码围栏?

输出以标记为 scss 的 Markdown 代码块形式返回,因此会显示语法高亮。将围栏之间的内容复制到 .scss 文件中即可。

我的样式表最大可以有多大?

每次最多 5 MB;更大的输入会被拒绝并显示提示。输出与代码格式化工具的 SCSS 选项完全相同。

关于 OneClick Pro

OneClick Pro 是一个免费的工具集合,包含超过 150 种网络工具,助你处理日常工作:转换图像和单位、格式化和验证代码、检查域名和 SEO,以及处理文本、日期和数字。所有工具均可免注册、免订阅使用;你输入的内容仅用于计算结果,绝不会被存储。你可以将它用作处理临时任务的快捷工具箱,也可以收藏每天都会用到的工具。