Are there any Sass code formatters?

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

Beau Smith · Accepted Answer · 2017-01-19T21:50:00.440

74

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.

edited Jan 19 '17 at 21:50

answered Mar 25 '12 at 00:14

Beau Smith

33,433
13
94
101

2

anything for windows user? Eclipse pluging ? :) – xchg.ca Apr 02 '13 at 00:32
2

@xchg.ca i've created a basic Sublime Text 2 plugin that uses sass-convert https://github.com/badsyntax/SassBeautify – badsyntax Apr 26 '13 at 09:24
2

@xchg.ca - You should find sass-convert.bat in your Ruby install's bin folder. – Mikepote Jun 26 '13 at 08:42
1

Great! But is there any way to preserve new-lines? – borisdiakur Dec 08 '13 at 19:33
1

Tried it but it messed up my code (problem with multi-line comments?). Luckily I made a backup. – Mark May 21 '14 at 21:28
How would this be called for each .scss in the folder? thanks!! – Toni Michel Caubet Jul 20 '15 at 11:31
@ToniMichelCaubet - `sass-convert folder_name/*.scss folder_name/*.scss` – Beau Smith Aug 14 '15 at 18:57
Visual Studio 2015 will format it, just hit Ctrl-K-D or Edit -> Advanced -> Format Document – Mike K Aug 02 '16 at 19:03
http://www.dirtystylesheet.com/ – cwd Jan 19 '17 at 19:05

Jason · Answer 2 · 2013-01-26T15:22:52.570

11

http://hilite.me/ - supports Sass and Scss

JSFiddle will do the trick as well. Just hit the TidyUp button

edited Jan 26 '13 at 15:22

answered Sep 30 '12 at 02:07

Jason

296
2
8

score 2 · Answer 3 · answered Jun 04 '12 at 01:25

Pretty Diff will strip the "$" from your variables.

You can try: 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).

Regards

score 1 · Answer 4 · answered Apr 21 '15 at 10:39

1

If you use sublime text I can recommend SassBeautify to quickly format any sass/scss https://packagecontrol.io/packages/SassBeautify

answered Apr 21 '15 at 10:39

richimgd

105
1
8

score 1 · Answer 5 · answered Mar 29 '12 at 11:12

1

I ran the code through Pretty Diff and I got this output:

.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.

answered Mar 29 '12 at 11:12

austincheney

1,189
9
11

Hummmm, beautification is imperfect for SCSS from Pretty Diff, but appears functional. I am working on fixing what flaws are visible from this immediate example. – austincheney Mar 29 '12 at 11:22
1

are you creator of Pretty Diff? – Jitendra Vyas Aug 16 '12 at 16:13

Are there any Sass code formatters?

5 Answers5

Online

Via Command Line