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 {}
Sass consists of two syntaxes.
SASS follows strict indentation, SCSS has no strict indentation. SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS style and use of semicolons and braces are mandatory.
SCSS contains all the features of CSS and contains more features that are not present in CSS which makes it a good choice for developers to use it. SCSS is full of advanced features. SCSS offers variables, you can shorten your code by using variables. It is a great advantage over conventional CSS.
Paste your CSS
/SCSS
/LESS
into dirtystylesheet.com and hit Clean
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
:
$ sass-convert --help
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With