css – 有没有任何Sass代码格式化程序?

有没有任何代码美化格式化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 {}

解决方法

线上

将CSS / SCSS / LESS粘贴到dirtystylesheet.com中,然后单击清除

通过命令行

通过命令行,您可以使用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时安装。它可以转换之间的任何方向: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语法更严格(只允许一个属性:值对每行),你不太可能遇到一个有关凌乱的代码的问题。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效