Compiling SCSS to CSS using GUI tools

Compiling SCSS to CSS using GUI tools


Is it okay to just use GUI tools like codekit and prepros for compiling SCSS to CSS? Do you guys use it?


I use CodeKit to compile LESS files to CSS. Actually, Codekit does a lot more… it also does JSLinting, compressing image files, automatic browser refresh (also has server pass-through capability and local css overrides), auto-prefixing, minification, uglification, etc. all in a single package.

I’ve also used Web Compiler extensions for Visual Studio IDE for C#/NET projects, but I find it buggy and Codekit works better/more reliably.

But then, I work for myself. No management to tell me what to use. I am the management. If you’ll be working somewhere for someone else, then you may have no choice but to use your employer’s tools/workflow and learn how to set up their config files. But personally, I’ve used Codekit since 2013 for all my clients.


Cool, glad to know this :smiley:


I’ve found codekit to be annoying as it adds a .codekit file to your codebase. It’s a great tool don’t get me wrong, but some clients have gotten annoyed with the introduction of this file. Plus after a while you can’t do much on the free version without upgrading.

I’ve been using (free and open source) which does the exact same thing, minus a few bells and whistles. It’s definitely worth a look for anyone who wants to try a Sass -> CSS GUI.


If your just working by yourself, sure.

Note that if you’re working in a team, then this isn’t something you should need to think about: it should just happen automatically and you should never need to really see any CSS. Hence tooling exists to just do it automatically — for example, install node-sass, then run a command that looks something like sass -w myIputFile.scss myOutputFile in the project folder, then develop.


There is also Live Sass Compiler for VS Code.