在线

Question

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 {}

Answer 1

在线

将CSS / SCSS / LESS粘贴到dirtystylesheet.com并点击清洁

通过命令行

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

$ sass-convert messy.scss clean.scss

或CSS到SCSS：

$ sass-convert messy.css clean.scss

或SCSS to Sass：

$ sass-convert messy.scss clean.sass

安装Sass时会安装sass-convert脚本。它可以转换：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对），您不太可能遇到凌乱的问题代码。

Answer 2

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

JSFiddle也会这样做。只需点击TidyUp按钮

即可

Answer 3

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

您可以尝试：http://www.prettyprinter.de/

它并不完美，但至少它会为嵌套规则缩进一个额外的级别，并且从我看到的内容中保持所有scss的内容不受影响（.ie不会将其删除）。

此致

Answer 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看起来很奇怪。

Answer 5

如果您使用崇高文本我可以推荐SassBeautify快速格式化任何sass / scss https://packagecontrol.io/packages/SassBeautify

有没有Sass代码格式化程序？

5 个答案:

在线

通过命令行