Workflow

Live CSS Editing with SASS and
Prepros for Windows

Posted on by

For a while, when it comes to SASS compilers, Mac has had the edge on tools available with CodeKit. CodeKit is an amazing program that injects the CSS right to your browser whenever you save your file, so the days of constant refreshing were over. Like many, I searched for a program like this for my Windows machine and there just wasn’t anything out there. Finally, there is a great tool out there for us Windows guys that allows us to easily manage our SASS projects and also….LIVE CSS EDITING!! That tool is Prepros. Prepros is capable of compiling Less, Sass, Scss, Stylus, Jade, Coffeescript, and Haml.

The steps to get started are simple…

1. Go download Prepros

Download Prepros

2. Click on install extension button and wait sometime for the extension to install.

PrePros for Windows

 3. Create your test folder

Be sure to have both a SCSS folder and CSS folder, as well as a HTML document linked to your css file.

4. Open up Prepros

All you need to do is drag and drop your test folder you created in to the application and Prepros will do the rest for you. It will recognize your file types and nest everything for you which is awesome.

5. Get Codin’

Open up your favorite text editor and start writing your HTML and SASS. When you save your SASS file, Prepros will compile it into your CSS file. You’ll know it has compiled successfully if you get one of these…

Prepros for Windows

6. View your pages with live reload

To view your HTML page in your browser with the live reload every time you save your SASS file, you’ll need to click the small globe icon in the bottom of the application.

Then, you’ll select the page you wish to view in your browser.

7. Continue to modify your code and enjoy watching the page reload all on it’s own!

Conclusion

I’ve tried quite a few different SASS compilers, but Prepros has  been the best in my eyes for a few different reasons. It’s the easiest to install/setup new projects, it’s visually the best looking application, and of course, it has the live reload feature. These all added up for a giant win in my book and has really helped my workflow get to the next level.

 

2 Responses to “Live CSS Editing with SASS and
Prepros for Windows”

  1. Tenzin says:

    the Compilation Successful Smiley face is not showing up after saving my less file. Please help. I dont know what i am doing wrong

    • jkinney768 says:

      Hi Tenzin,

      Tough to say since I can’t see your setup. Have you been able to use less before trying this? Is your code compiling, just no smiley face?

      It sounds like you may not just have Less setup for your project. If that’s the case, I would suggest starting here to setup your project first before trying to use PrePros http://lesscss.org/#getting-started.

      If you’re wanting to use Less with PrePros, you probably want to scroll down to the client side usage section. I hope this helps!

Leave a Reply to Tenzin