有没有 Sass 代码格式化程序？ [关闭]

Posted 2023-03-07

【中文标题】有没有 Sass 代码格式化程序？ [关闭]

【英文标题】：Are there any Sass code formatters? [closed]

【发布时间】：2012-04-05 15:51:12

【问题描述】：

是否有任何用于 Sass (SCSS) 代码的代码美化器格式化程序？我知道如何格式化由 SCSS 编译器生成的输出 CSS 代码，但是如何为 SCSS 代码本身提供良好的自动格式化？

我尝试了一些在线 CSS 格式化程序，但它们不适用于 SCSS 代码。

如果我把这个给他们

.list5   
    border-bottom: 1px solid #f2f2f1;
    padding: 0 0 20px 0;
    margin: 0 0 20px 0;
ul li 
    margin: 0 0 5px 25px !important;
    height: auto !important;
    background: none !important;
    font-size: 14px;
    padding: 18px 3px 5px !important;
    width: 169px !important; 
 

他们给出这个输出

.list5 
    border-bottom: 1px solid #f2f2f1;
    padding: 0 0 20px 0;
    margin: 0 0 20px 0;
    margin: 0 0 5px 25px !important;
    height: auto !important;
    background: none !important;
    font-size: 14px;
    padding: 18px 3px 5px !important;
    width: 169px !important;

删除这部分ul li

【参考方案1】：

在线

将您的 CSS/SCSS/LESS 粘贴到 dirtystylesheet.com 并点击 Clean

通过命令行

通过命令行，您可以使用sass-convert 脚本重新格式化CSS/SCSS/Sass：

$ sass-convert messy.scss clean.scss

或 CSS 到 SCSS：

$ sass-convert messy.css clean.scss

或 SCSS 到 Sass：

$ sass-convert messy.scss clean.sass

sass-convert 脚本是在您安装 Sass 时安装的。它可以在 css、scss 和 sass 之间转换任何方向。

详细了解sass-convert：

访问内置帮助：$ sass-convert --help http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax http://sass-lang.com/docs/yardoc/#executables

高级用户提示：因为sass 语法更加严格（每行只允许一对property: value），您不太可能遇到代码混乱的问题。

【讨论】：

windows 用户有什么用吗？ Eclipse 插件？ :)

@xchg.ca 我创建了一个基本的 Sublime Text 2 插件，它使用 sass-convert github.com/badsyntax/SassBeautify

@xchg.ca - 您应该在 Ruby 安装的 bin 文件夹中找到 sass-convert.bat。

太棒了！但是有什么方法可以保留换行符吗？

试过了，但它弄乱了我的代码（多行 cmets 有问题？）。幸运的是我做了备份。

【参考方案2】：

http://hilite.me/ - 支持 Sass 和 Scss

JSFiddle 也可以解决问题。只需点击TidyUp 按钮

【参考方案3】：

Pretty Diff 将从变量中删除“$”。

你可以试试：http://www.prettyprinter.de/

它并不完美，但至少它为嵌套规则缩进了一个额外的级别，并且据我所见，所有 scss 内容都保持不变（即不会将其剥离）。

问候

【参考方案4】：

我通过Pretty Diff 运行代码并得到以下输出：

.list5 
    border-bottom:1px solid #f2f2f1;
    padding:0 0px 20px 0px;
    margin:0 0px 20px 0px;
    ul li 
        background: none !important;
        font-size: 14px;
        height: auto !important;
        margin: 0px 0px 5px 25px !important;
        padding: 18px 3px 5px !important;
        width: 169px !important;
    

这就是你要找的吗？ CSS 看起来很奇怪。

【讨论】：

嗯，Pretty Diff 的 SCSS 美化效果并不完美，但看起来很实用。我正在努力修复这个直接示例中可见的缺陷。

你是 Pretty Diff 的创造者吗？

【参考方案5】：

如果你使用 sublime text 我可以推荐 SassBeautify 来快速格式化任何 sass/scss https://packagecontrol.io/packages/SassBeautify