by Flo Preynat

I am a huge fan of Codekit. I don’t have enough words to praise Bryan (who is such a cool guy) and his dev tool, and since I work 95% of my time on Apple, Codekit is AND does all I need as far as my Sass is concerned.

But I happen to use windows machines every now and then, and although using the command lines “compass create” and “compass watch” is far from rocket science, I do miss Codekit’s features so much when I’m on Windows environments.

Huge news this week for Windows folks (sorry if I’m late to the party). A clever guy (Subash Pathak, you can give him some love here) released a free windows version of a Codekit-like app, named Prepros, and I thought I would give it a go.

Be aware that I’m only testing Sass here. Prepros looks like it compiles a number of other languages including the likes of coffee script, jade (whatever this is lol), and more, but I’m not touching those.


Let’s get cracking then. There’s not a huge amount of documentation on the site, but install and use are easy enough. Grab the app by downloading it (green button), and run the .exe.
Save the Live Browser refresh chrome extension in your files, open your chrome extension page (chrome://extensions), grab the saved extension file and drop it on the extension page.

Then it’s dev time. Go ahead and create a test folder. And add it to Prepros by dragging it onto the app (or use the + icon to locate the folder). The moment you add an scss folder and a file in it, Prepros will automatically recognize it and create a config.rb file and a .sass-cache folder.
Update: As some of you pointed it out in the comments, Prepros doesn’t deal with config.rb nor sass-cache files/folders. I only got those files because I was testing on an environment with ruby and Sass pre-installed. Therefore you can start with a windows environment free of those. Prepros will take care of the compiling itself.

Free Codekit-like app for windows Prepros

Create a css folder. You can adjust the name of your css, img and js folders right on Prepros.

Live Refresh

1. Make sure you tick the “Allow Access to file URLs” checkbox in your chrome extensions settings

Prepros in the Chrome extensions settings

and 2. do not open your html straight from the browser or by choosing open file with following a right click. Use Prepros’ ‘Open project live url’ as Subash stated it in the FAQ. Change your files and watch your html getting refreshed automatically.

Make sure to use Prepros 'Open project live url' option


Very much impressed with Prepros. We were promised a free version of Codekit for Windows, and the least we can say is we did get that. Well done Subash!

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Most Recent Posts

Special Recent Posts

Make Google Charts responsive

Make Google Charts responsive

March 19th, 2014

A quick blog post on how to make Google Charts play nicely in responsive mode. Nothing close to rock[...]

Codekit 2 : even more steroids for us web developers

Codekit 2 : even more steroids for us web developers

March 17th, 2014

I was on holiday when Bryan released the new version of Codekit and never had the chance to to check[...]

Open terminal from folder in finder

Open terminal from folder in finder

January 27th, 2014

A quick one nudged my way by Adrien Joly this morning. You can now open a terminal window from a [...]

A look back at Wordcamp Paris 2014

A look back at Wordcamp Paris 2014

January 22nd, 2014

I went to Wordcamp Paris last week. The event was held On Friday 17th January at MAS Paris and Satur[...]

Gruntjs Boilerplate: my dummy-proof step-by-step guide

Gruntjs Boilerplate: my dummy-proof step-by-step guide

January 14th, 2014

Right so I've made the leap. After quite a ride, and some cool adventures with Codekit, I've deci[...]


  1. Chad says:

    Please update your article as there are a few items that are not correct.

    You state “The moment you add an scss folder and a file in it, Prepros will automatically recognize it and create a config.rb file and a .sass-cache folder.”

    This is not correct. Prepros does not generate any config.rb file. You can create one but it must be in the project root folder in order to be used – as of version 1.4.0.

    Also, Prepros does not create any .sass-cache folder that I’m aware of.

  2. David C. says:

    That’s pretty exciting news. I spend a lot of time hopping between platforms, and have been searching for a Codekit alternative for Windows for a long time now. This really helps ease the pain when away from Mac.

  3. ShaunyearStrong says:

    I’ve been using Mixture for a couple of months or so, but I’ve tried proprso after reading this and it seems a lot more lightweight, does all that I need, and importantly it’s as close to Codekit as it can be.

  4. Hey Shaun, been using Codekit for what it seems forever now, and Prepros is truly as close to it as you can get.

  5. ROBERTH says:

    Haven’t you heard of Scout? An app, also free and it’s been around for some time now. It is not an extension, which i call a point in its favor and works like a charm.
    Does the same things, btw.

    • Hi Robert, yeap I’m aware of Scout. As i stated it, I’m only looking at Sass but that doesn’t mean other languages should be forgotten. Codekit and Prepros compile everything from less, jade, haml, etc when Scout only deals with Sass/Compass.

      Hence the comparison.

  6. Ian says:

    This is a really good app. The latest version 2.0.1 at this time runs really fast because they dropped livereload for non compiled html/css/js but compiled files will livereload the page as usual. It’s a good thing IMHO to let the pre-processor do it’s job (pre-processing) and use something else for livereloading regular files. Either use the livereload app (available in beta for windows now) or something like node-live-reload along side prepros.

    As a windows user I thought it was funny to start seeing requests for a mac osx version of prepros since they already have codekit but then I realized prepros is free but codekit isn’t.

  7. Nick says:

    Hi mate,

    Great article, I just stumbled across PrePros today after helping a colleague with sass as he’s on a Windows machine. I almost felt sorry for the guy because he couldn’t use CodeKit which I use as I’m a long time mac user.

    I did the old google search for “sass compiler for windows” and this was the first result! I was happy to let him know there is a good preprocessor available for windows, I personally couldn’t live without CodeKit until what I saw PrePros was like today! Great news for window devs!

  8. e11world says:

    Just stumbled on this post and installed Prepros on my Win7 machine and it keeps crashing after 10-40 seconds of running. Any idea on why that is happening? Or better yet, has anyone had this same problem (I know it’s not the right place to post this too but any help is good)?
    It seems like it would be just what I was missing from my workflow (if it works right).

  9. Daniel Sanders says:

    I had a large Less project already compiling successfully using WinLess, but there were a few issues and desired features with WinLess that made Prepros attractive. However, the first time I attempted to compile with Prepros it failed (unexpected token), citing a perfectly valid line of CSS as the issue. With no more detail, I could not proceed.
    It was suggested by Subash that the issue may be a “weird selector” or a “Less bug”, but I am puzzled as to how this could be given that WinLess uses the original Less compiler and has compilled the Less code successfully.

  10. Daniel Sanders says:

    I have just attempted to compile an existing and successfully compiled SASS project and Prepros is deciding which .scss files to load/show in the listing. I cannot see the logic by which it is omitting some and not others, although it does seem to be ignoring all .scss files of the form “_filename.scss”.
    If I drop a folder of .scss files onto area labelled “Please drag and drop a folder to start a new project.” I expect all scss files, regardless of their filenames and content, to appear in the file listing. It should then be up to me to decide whether to compile each file and how.

    I hate to be down on this app because it does look very slick. However, it has been very problematic for me on the only two projects I have tried it on and both projects were previously successfully compiled on WinLess and CodeKit.

    I will register these issues on github.