有没有任何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并点击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 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对），所以不太可能遇到乱码的问题。

Answer 2

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

JSFiddle也会这样做。 只需点击TidyUpbutton

Answer 3

Pretty Diff会从你的variables中去掉“ $ ”。

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

这不是完美的，但至less它缩小了嵌套规则的一个额外的级别，从我看到的所有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