CSS 美化器:在线格式化 CSS、LESS 和 SCSS
CSS 美化器使用 Prettier(VS Code 采用的格式化引擎)将杂乱或压缩的 CSS 转换为可读、排版一致的代码。支持 CSS、LESS 和 SCSS 语法,可设置 2 空格、4 空格或制表符缩进,并可配置行宽。粘贴输入、选择格式化选项后复制结果;整个处理过程在浏览器中进行,不上传数据。
CSS 美化器使用 Prettier(VS Code 采用的格式化引擎)格式化 CSS、LESS 和 SCSS。它将杂乱或压缩的样式表代码转换为更易读的排版,方便检查、评审和分享。在浏览器中粘贴代码,选择格式化选项,准备好后复制输出。
格式化器支持 2 空格、4 空格或制表符缩进,以及可配置的行宽。这些设置控制缩进的呈现方式和格式化后每行的最大长度。该工具专注于格式化输入,不涉及 CSS 与 LESS/SCSS 之间的相互转换。
CSS 是标准样式表语言,LESS 和 SCSS 是在 CSS 基础上增加了书写惯例的样式表语法。当您希望其中一种支持语法的代码更一致、更易读,而又不想手动调整空白时,CSS 美化器很有用。这可以让样式表更易于评审、对比,或加入报告。
CSS 美化器完全在浏览器中运行。您的输入在本地设备上处理,不会上传或发送到服务器;页面加载后,工具也可离线使用。对于希望快速格式化样式表代码、同时将代码保留在本地设备的开发者和运维工程师来说,这是一个实用的选择。
步骤 1:将 CSS、LESS 或 SCSS 代码粘贴到输入框中。可以是可读的样式表,也可以是压缩的代码片段。
步骤 2:选择缩进样式:2 空格、4 空格或制表符。设置行宽以控制格式化后每行的最大长度。
步骤 3:查看格式化后的输出。如果输入无法正确解析,可以根据报告的行号找到需要处理的位置。
步骤 4:复制美化后的代码,用于您的项目、评审或文档。
使用场景:在提交之前,让机器生成的难懂 CSS 文件更易于审查。
使用场景:将自己没有写过的 CSS 文档与项目遵循的排版风格进行核对。
使用场景:统一 CSS、LESS 或 SCSS 的格式,让代码差异显示真正有意义的变更,而不是空白噪音。
使用场景:在将样式表片段加入缺陷报告或代码评审前先美化。
使用场景:检查样式表是否能正确解析,并定位格式化遇到问题的行。
使用场景:调整缩进和行宽,让样式表更便于团队浏览。
使用场景:调试时需要查看压缩样式表的规则时,将其重新格式化。