Search code examples
csssasscompass-sass

Are there any Sass code formatters?

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

Solution

  • 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:

    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.