Normally I like to do my development in OS X, but because of a new job I have taken, I have to use Windows. Since we are starting a large redesign, I found this to be the perfect time to get some modern tooling in place, and this is what I have been using to quickly change and view stylesheets.
Tools
gVim for Windows
I have been using Vim for years, but any text editor will do. If you’re new to Vim and want to try it out, I recommend starting with vimtutor.
Chrome Web Browser
On the Mac I usually just use Safari, but on Windows I go with Chrome. Chrome also has a lot of nice extensions for developers available. Since WebKit is the most common rendering engine on the web today, it’s hard to go wrong developing for a WebKit-based browser first, and then checking/fixing problems in other browsers later.
Compass
Now things start to get interesting. Before you can install Compass you’ll need Ruby. Currently Ruby 2.0.0-p0 is the latest release, but since it just came out and I’m not familiar with the changes, I opted for 1.9.3-p392. You can get a Windows installer from the RubyInstall for Windows download site. I chose to add the Ruby to my path.
Once Ruby is installed, there will be a new application in your start menu called Start Command Prompt with Ruby
. I just searched for “Ruby” and it came up. To install compass, simply run the command gem install compass --no-rdoc --no-ri
. The two options aren’t necessary, but it did speed things up quite a bit for me.
Now that compass is installed, cd
to your project directory. Now you can create the necessary Compass files. In this example, I put things into an assets directory.
cd path\to\project
compass create assets
cd assets
compass watch
Since we are working with local files, we will need to modify the HTML lines just a little from what was output from the create command above. Here is a sample HTML index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Compass Demo</title>
<link href="assets/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="assets/stylesheets/print.css" media=“print” rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="assets/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<h1>Hello, Compass!</h1>
</body>
</html>
Whenever you change your .scss or .sass files in the sass directory, you can reload this page and see the changes have already been precompiled for you.
LiveReload
But we don’t want to refresh the browser all the time, do we? I didn’t think so. That’s where LiveReload comes in. Currently the most recent version for Windows is 0.7 Alpha. After running the installer, we want to add the assets/stylesheets directory to be watched. Click the plus button to add the directory. While LiveReload claims to be able to automatically compile SASS, etc., the one time I tried it the app crashed, so I gave up. Since we already have Compass watching the stylesheets directory, I just monitor that with LiveReload.
There are two ways to get the changes to automatically appear in the browser. The first is by adding a snippet of JavaScript to your page, but I prefer the browser extensions. The JavaScript snippet is handy when testing mobile browsers (e.g. iPad, iPhone), though.
LiveReload Browser Extension
Since I’m using Chrome, I just downloaded the browser extension from the Chrome Web Store. Since we’re testing local files, you’ll need to go to Settings, Extensions, and find the checkbox to allow local URLs.
Now that everything is set up, navigate to your index.html file, click the LiveReload menu icon in Chrome to connect the the LiveReload app, and make a change in screen.scss. Upon save you will see your changes automatically appear in your browser.