search

badsyntax / SassBeautify

[not maintained] A Sublime Text plugin that beautifies Sass files.
https://github.com/badsyntax/SassBeautify
MIT License
143 stars 13 forks source link

Option to re-order css properties on beautify #109

Open jeanpierreb opened 8 years ago

jeanpierreb commented 8 years ago

Would be great if there was an option for SassBeautify to sort the properties and enforce the sort order from scss-lint.

https://github.com/brigade/scss-lint/blob/master/data/property-sort-orders/concentric.txt

saltcod commented 7 years ago

Of interest, Sublime CSSComb does this reordering perfectly. But it doesn't get the spacing issues right, as Sassbeautify does.

I spent a bunch of time trying to get the two to work together — the formatting from sassbeautify, and the reordering from csscomb but no beueno. Might be possible, but I couldn't figure it out.

saltcod commented 7 years ago

And finally, I think I've found a decent compromise. I currently have reordering on via CSSComb, triggered by a custom key map, and then run sassbeautify on save. Not bad.

minikN commented 6 years ago

@saltcod @jeanpierreb You can achieve this by using sublime-hooks (Package Control -> Install -> Hooks). That way you can hook the css_comb command to saving a file.

  1. Install the hooks package
  2. open a random scss file
  3. Go to Settings -> Settings - Syntax Specific (ST3 Build 3143)

A new empty Sass.sublime-settings file should open. Now add the following:

"on_pre_save_language": [
    {
        "command": "css_comb"
    }
]

and save it. That way CSSComb will trigger every time you save the file. One setting I added to my CSSComb User settings is "space-before-opening-brace": " "

After that it worked fine for me. However now CSSComb formats the file exactly like SASSBeautify would. So I lost the necessity to use it at all. Hope this helps someone.