blog and things oh hi there!
Format Sass with Sublime Text 3

I am a huge fan of auto formatting code whenever possible and here is how I got it to work with sass-convert and Sublime Text 3.

Start by installing sass-convert globally:

npm -g i sass-convert

Once installed, hook it up with Sublime Text 3 via a custom build system. In Sublime Text 3, goto Tools > Build System > New Build System.... Name the file to scss-sublime-build and here is what goes inside.

    "path": "/Users/kjung/.rvm/gems/ruby-2.1.2/bin",
    "selector": "source.css, source.sass, source.scss",
    "shell_cmd": "sass-convert -i --indent 4 --unix-newlines \"$file\""

As you can see, I simply define the path for the sass-convert binary, which you can get by running which sass-convert in your terminal. The selector tells sublime which filetypes this build system applies to. Lastly, the shell_cmd is the actual command that gets triggered and $file is a variable that holds the absolute path for the current file you're working in within sublime. Look at the manual for sass-convert and add in any options you want in the shell_cmd to make it work the way you want.

Make sure for Tools > Build System, you have Automatic selected and try to build a scss, sass, and css file by hitting the Ctrl + B hotkey.

Hopefully you'll see a flicker and your code formatted!

© 2020 Kevin Jung