Live CSS Editing with SASS and
Prepros for Windows
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
2. Click on install extension button and wait sometime for the extension to install.
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…
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!
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.