是否有Sass代码格式化程序？\[关闭\]

CSS

神奇Davaid

2020-03-19

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

第2385篇《是否有Sass代码格式化程序？\[关闭\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
米亚JinJin樱 2020.03.19

我通过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来说看起来很奇怪。

DavaidTony宝儿 2020.03.19

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

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

它不是完美的，但至少它为嵌套规则缩进了一层，从我所看到的来看，这使所有的scss内容都保持不变（.ie不会删除它）。

问候

梅蛋蛋 2020.03.19

如果您使用崇高的文字，我可以建议SassBeautify快速格式化任何sass / scss https://packagecontrol.io/packages/SassBeautify

逆天西里 2020.03.19

线上

将您的CSS/ SCSS/ 粘贴LESS到dirtystylesheet.com中，然后单击Clean

通过命令行

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

$ sass-convert messy.scss clean.scss

或CSS到SCSS：

$ sass-convert messy.css clean.scss

或SCSS到Sass：

$ sass-convert messy.scss clean.sass

在sass-convert当您安装萨斯脚本安装。它可以在css，scss和sass之间转换任何方向。

进一步了解sass-convert：

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

西里米亚 2020.03.19

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

JSFiddle也可以解决问题。只需按TidyUp一下按钮

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android