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.

Install

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

Verdict

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

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

June 9th, 2014

We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]

Comments

  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.

  11. ryan says:

    Hi Guys Im coming from a mac need to dev on pc for work but which do you guys prefer for windows prepros or scout and why? I will just be working with sass / zurb foundation mostly and would like as little as possible that can deal with that.