CSS 是否有任何 Sass 代码格式化程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9799346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Are there any Sass code formatters?
提问by Jitendra Vyas
Is there any code beautifier formatter for Sass (SCSS) code? I know how to format the output CSS code generated by SCSS compiler but how to give nice auto formatting to SCSS code itself?
Sass（SCSS）代码是否有任何代码美化格式化程序？我知道如何格式化由 SCSS 编译器生成的输出 CSS 代码，但如何为 SCSS 代码本身提供良好的自动格式化？
I've tried some online CSS formatter but they don't work with SCSS code.
我尝试了一些在线 CSS 格式化程序，但它们不适用于 SCSS 代码。
If i give this to them
如果我把这个给他们
.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; }
}
they give this output
他们给出这个输出
.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;
}
which remove this part ul li {}
删除这部分 ul li {}
回答by Beau Smith
Online
在线的
Paste your CSS/SCSS/LESSinto dirtystylesheet.comand hit Clean
粘贴CSS/ SCSS/LESS成dirtystylesheet.com和命中Clean
Via Command Line
通过命令行
Via command line you can re-format CSS/SCSS/Sassusing the sass-convertscript:
通过命令行，你可以重新格式化CSS/ SCSS/Sass使用sass-convert脚本：
$ sass-convert messy.scss clean.scss
or CSS to SCSS:
或 CSS 到 SCSS：
$ sass-convert messy.css clean.scss
or SCSS to Sass:
或 SCSS 到 Sass：
$ sass-convert messy.scss clean.sass
The sass-convertscript is installed when you install Sass. It can convert any direction between: css, scss, and sass.
该sass-convert脚本在您安装 Sass 时安装。它可以在 css、scss 和 sass 之间转换任何方向。
Learn more about sass-convert:
了解更多sass-convert：
- Access the built-in help:
$ sass-convert --help - http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax
- http://sass-lang.com/docs/yardoc/#executables
- 访问内置帮助：
$ sass-convert --help - http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax
- http://sass-lang.com/docs/yardoc/#executables
Advanced user tip:Because the sasssyntax is much stricter (only allowing one property: valuepair per line) you're less likely to run into an issue with messy code.
高级用户提示：因为sass语法更严格（property: value每行只允许一对），所以您不太可能遇到混乱代码的问题。
回答by Jason
http://hilite.me/- supports Sass and Scss
http://hilite.me/- 支持 Sass 和 Scss
JSFiddle will do the trick as well. Just hit the TidyUpbutton
JSFiddle 也可以解决这个问题。只需按下TidyUp按钮
回答by ziku
Pretty Diff will strip the "$" from your variables.
Pretty Diff将从您的变量中去除“ $”。
You can try: http://www.prettyprinter.de/
你可以试试：http: //www.prettyprinter.de/
It's not perfect but at least it indents an extra level for nested rules and from what I've seen keeps all the scss stuff untouched (.ie does not strip it out).
它并不完美，但至少它为嵌套规则缩进了一个额外的级别，并且从我所看到的情况来看，所有 scss 内容都保持不变（即不会将其删除）。
Regards
问候
回答by austincheney
I ran the code through Pretty Diffand I got this output:
我通过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;
}
}
Is that what you are looking for? It looks strange for CSS.
这就是你要找的吗？CSS看起来很奇怪。
回答by richimgd
If you use sublime text I can recommend SassBeautify to quickly format any sass/scss https://packagecontrol.io/packages/SassBeautify
如果你使用 sublime text 我可以推荐 SassBeautify 来快速格式化任何 sass/scss https://packagecontrol.io/packages/SassBeautify
