Question

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?

I’ve tried some online CSS formatter but they don’t work with SCSS code.

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

Answer 1

Online

Paste your CSS/SCSS/LESS into dirtystylesheet.com and hit Clean

Via Command Line

Via command line you can re-format CSS/SCSS/Sass using the sass-convert script:

$ sass-convert messy.scss clean.scss

or CSS to SCSS:

$ sass-convert messy.css clean.scss

or SCSS to Sass:

$ sass-convert messy.scss clean.sass

The sass-convert script is installed when you install Sass. It can convert any direction between: css, scss, and sass.

Learn more about 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

Advanced user tip: Because the sass syntax is much stricter (only allowing one property: value pair per line) you’re less likely to run into an issue with messy code.