You can use style injection when developing sinatra apps, allowing you to see css/sass changes without refreshing your browser.

This is especially helpful when doing responsive design, since you can have different sized browser windows open at the same time and see how each changes affects a particular viewport.

Getting Set Up

1. Clone and bundle a preconfigured sample application
2. Install the appropriate livereload browser extension - there's one for Chrome, Firefox, and Safari
3. From the public/css directory, run sass --watch style.scss:style.css (this command could change as more sass files are added to the project)
4. From the project root directory, run guard
5. From the project root directory, run rackup
6. You're done! Now anytime you save a change style.scss, the style.css file gets updated and your browser will show its changes without reloading the page.

There's a more detailed version of this writeup on the project readme. Special thanks to Matt Brictson's excellent blog post, without which this tip would not be possible.