Live In-browser Sass Editing Using Compass
With the August 15th release of Compass 1.0 (Compass is an open-source CSS Authoring Framework that uses Sass), the ability to generate Sass source maps is now available for stable version Compass users, which means “live editing” is now possible.
Live editing means you can make changes to your Sass files in your browser, see the changes take effect automatically, and have those changes save without having to switch back to your text editor — woohoo!
What you’ll need:
- Chrome (version 30 or higher) or Firefox (version 29 or higher)
- Native browser developer tools enabled (Chrome, Firefox)
- A local project set up with Sass (version 3.3.0 or higher) and Compass (version 1.0.0.alpha.16 or higher)
Disclaimer: since I work in Firefox, I’m inevitably missing insights into Chrome’s DevTools' handling of Sass source maps. If you have any thoughts or tips to share, please leave a comment below!
Using source maps on a Compass project
1. Compass (and optionally: Bundler) configuration to enable source maps
At Forum One, we use Bundler to manage Ruby gem versions for projects, but it's not required.
- Delete the Gemfile.lock (if it exists)
- In the Bundler Gemfile:
- Change the Compass line to "gem 'compass', '>= 1.0.0’”
- Change the Sass line to “gem ‘sass’, ‘>=3.3’” (or ‘3.3.0.alpha' for Chrome users)
- In the Compass config.rb file
- Add "sourcemap = true"
- In Terminal (or command line tool of choice), run ‘bundle install’
2. Browser Setup
3. Compass Watch
Once you tweak your Compass configuration and browser settings, you’re ready to go. Now when you run “compass watch” (or “bundle exec compass watch” for Bundler users), in addition to a .css file, Compass will also generate a .css.map file. Admire that file; it's the magic ingredient!
4. Go Forth and Edit In-Browser
When you use the browser’s developer tools, instead of seeing .css files referenced, you'll now see .scss (or .sass) files. Make whatever changes you’d like, hit CTRL + S to save and Compass will re-compile the CSS and refresh your page automatically. How cool is that?
Some of my first questions
Q: Can you reference variables in the browser? A: Yes! I wasn’t expecting this to work, but it did. Very cool. Q: Does this work with Firebug? A: Not by default, but may be possible. Q: Does Sass Globbing still work? A: Yep!
Pros and Cons
- No need for the FireSass add-on. This is an extra bonus because now you can disable debug compiling of CSS, which makes for cleaner commits if your development workflow includes committing .css files to a code repository.
- No need for LiveReload. Another add-on I can disable. Sweet!
- If you were a Firebug plus ColorZilla user: Firefox's Developer Tools has a built-in color grabber. That makes 3 add-ons you'll (or at least I) no longer need.
- Finally, the main attraction: no more switching between the browser and text editor.
- Firefox only: when you first edit a Sass file, you'll get a pop-up window prompting you to save it so Firefox knows where that file lives in your project structure. A minor nuisance if you live and breathe SMACSS and split up your Sass into numerous partials. Also, this step must be repeated every time you save the file for the first time, after Firefox has been restarted.
- If you're a Sublime Text fan like me, you likely have custom snippets, customized project file displays, etc. These finely-tuned text editor tweaks are of course lost when primarily working in the browser.
- Neither browser's developer tools currently have code folding (all the more reason to SMACSS up your Sass so the files are short).
- At first it was hard to tell when Compass compiling failed. I found myself saving something repeatedly and getting frustrated because nothing was updating. Make sure you can still see what Compass is doing and that it's compiling without errors.
- While changes made in the editor can be saved, those in the Elements/Inspector tab cannot.
- Having the Firefox Developer Tools open in more than one tab is asking for trouble. Some symptoms I noticed were that not all the Sass files would show, and it would ask me to re-save files I had already saved. Simple solution: only have it open in one tab.
These tools aren't perfect, but this is the front end world so nothing stays the same for very long, so expect improvements to and innovation around the use of source maps in the near future. Happy in-browser editing!