--- title: Live Editing Sass in Firefox with Vim Keybindings pub_date: 2014-02-20 10:08:45 slug: /blog/2014/02/live-editing-sass-firefox-vim-keybindings tags: Building Smarter Workflows metadesc: The Firefox developer tools now support live editing Sass files right in the browser and Vim keyboard shortcuts code: True tutorial: True --- [TOC] The Firefox developer tools now support [live editing Sass files right in the browser](https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/). This is, like a lot of what Mozilla has been doing lately, a case of Firefox playing catch-up with the competition -- Chrome has had similar features for quite some time. On the other hand, Firefox is ahead of Chrome in another area: [Vim and Emacs keybindings](https://developer.mozilla.org/en-US/docs/Tools/Using_the_Source_Editor#Alternative_key_mappings) (which I believe is because the editor in Firefox is based on [CodeMirror](http://codemirror.net/)). If that means nothing to you then stick with Chrome. If, however, you're loath to abandon the power of Vim or Emacs for editing files in the browser, this means you can have the best of both worlds -- live editing Sass files in the browser *and* Vim or Emacs keybindings. Because live editing [Sass files](http://sass-lang.com/) in the browser with Vim keybindings? That's some awesome sauce right there. If you prefer, here's a screencast walking you through the process. Other wise, read on.
## Set Up Sass Editing in Firefox. The Mozilla Hacks blog posted a [quick overview](https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/) on how to set things up, but it assumes you've already got Sass set up to compile sourcemaps. In case you don't, here's some more complete instructions on how to set up Sass and Firefox[^1]. ### Firefox First off you need a pre-release version of Firefox. Both the Sass sourcemaps support and the Vim/Emacs keybindings are available starting with Firefox 29. I use the [Nightly channel](http://nightly.mozilla.org/) (currently Firefox 30a1), but the [Aurora channel](http://www.mozilla.org/en-US/firefox/aurora/) (currently Firefox 29a2) will work as well. ### Sass and Compass The next step is to set up Sass such that it will output a sourcemap file in addition to your CSS. What in the world is a sourcemap? Simply put, sourcemaps are a way to map compiled code back to its pre-compiled source. The reason any of this is possible at all is because Sass recently added support for CSS sourcemaps. That means that when it turns your Sass code into CSS, Sass also outputs a map of what it did. Firefox can then look at the map and connect the rendered CSS back to your source Sass. The sourcemap support is brand new and currently only found in the pre-release versions of Sass. I happen to like the Sass offshoot [Compass](http://compass-style.org/) better than vanilla Sass as Compass provides some very handy extras like CSS 3 prefixing tools. As with Sass, only the pre-release versions of Compass support sourcemaps (and even those are [not quite there](https://github.com/chriseppstein/compass/issues/1108)). Fortunately we can get the pre-release versions of both Sass and Compass with a single command. ~~~.language-bash $ sudo gem install compass --pre ~~~ This command tells the Ruby gem system that we want the pre-release version of Compass (that's what the --pre flag is for). In the process we'll also get the latest version of Sass that works with Compass. You're probably used to starting Compass with something like `compass watch`. Eventually you'll be able to do that, but for now the only way I've been able to get Sass, Compass and sourcemaps working together is by invoking `sass` directly like so: ~~~.language-bash `sass --compass --poll --sourcemap --watch sass/screen.scss:screen.css` ~~~ To break that down: 1. `sass --compass` -- this bit starts Sass and includes Compass so that we have access to all our extras. 2. `--poll` -- this gets around a super annoying permissions error. This shouldn't be necessary, but currently it gets around a bug. Alternately you can start `sass` with `sudo`. 3. `--watch` -- watch tells sass to watch for changes rather than just compiling once. 4. `--sourcemap sass/screen.scss:screen.css` -- This is the important part. We tell Sass that we want to use sourcemaps and then we create a mapping. In this case I've told Sass to make a map explaining how the file screen.scss inside the `sass` folder turns into the `screen.css` output file. This is what Firefox will use to map CSS rules to Sass rules. Sass is now running, watching our files for changes. Now we just need a local server of some kind. I typically use my [my python server trick](https://longhandpixels.net/blog/2013/11/easiest-way-get-started-designing-browser) for quick prototyping, but anything will work -- local Apache, Nginx, Django development server, whatever development server RoR offers -- anything will work. ### Putting it All Together Now let's go back to Firefox and let it know about our sourcemap. Here's where things are significantly different than Chrome. I'm not sure which is "better" but if you're used to the Chrome approach, the Firefox approach may seem strange. ![Right click in the CSS field to show original source](https://longhandpixels.net/media/images/2014/show_original_sources.jpg){: class="img-right"}First load your localhost url. Now open the developer tools and inspect some element you want to change. Now all you need to do is right click in the CSS section of the Inspector tab and choose "Show original sources". Now click the little link next to the style rules and Firefox will open your Sass file in the Style editor. Now just hit save, either the link next to the file list or hit CMD-S (CTRL-S). The first time you save a file you have to tell Firefox where the file is on your disk -- navigate to the folder with your Sass files and hit save, overwriting the original. You'll need to do this once for each Sass partial that you have, which is annoying if you've got a lot. I happen to prefer the Chrome method, which maps the local folder to a local URL. It's a bit more work to set up, but you only have to do it once. Either way though that's it, you're done. Edit Sass live in the browser, see your changes update almost instantly with no refresh. Here's what it looks like: [![Animated gif showing live Sass editing in Firefox](https://longhandpixels.net/media/images/2014/smaller-ff-tools.gif)](https://longhandpixels.net/media/images/2014/smaller-ff-tools.gif "View Image 1") : Just right click to change the view from compiled CSS to SCSS. Pretty Cool. Note that I've already saved the file once so Firefox knows where it is. ## Vim or Emacs Keybindings I know, I know you were only in it for the keybindings, how the heck do you get those? Pretty simple. Open `about:config` and search for `devtools.editor.keymap`. Right click the "value" field and enter either "vim" or "emacs". I had to restart Firefox for the changes to take effect. Now you have a way to edit Sass right in the browser and still get the benefit of all the keyboard shortcuts you've commited to muscle memory over the years. There's one annoying bug (at least I think it's a bug) for Vim users, `:w` (the Vim save command) does not work like CMD-S (CTRL-S); it will always open the file save dialog box rather than just writing to disk. It's annoying, but I haven't found a workaround yet. ## Shortcomings Compared to Chrome While Firefox's combo of live editing Sass and Vim keybindings is awesome, there a couple things that I think could be improved. In Chrome if you CMD-click (or CTRL-click) on an individual CSS rule in the styles tab Chrome jumps you to the relevant file and moves your cursor right to that rule. It even highlights the line in yellow for a second or two so you know where the cursor is in the file. It's very slick and very useful. CMD-click a rule in Firefox and nothing special will happen. Bummer. The other thing that's troubling me with Firefox is the need to "Save As" the first time you edit a Sass file. It feels janky to me and frankly it's a pain when your project has dozens and dozens of Sass partials. I much prefer Chrome's (admittedly perhaps more confusing at first) approach of associating a folder with a URL. Still, the Vim keybindings makes me more productive than I can be in Chrome without them so I'm back to Firefox. ## Further Reading * Mozilla Hack Blog: [Live Editing Sass and Less in the Firefox Developer Tools](https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/) * Tutsplus: [Developing With Sass and Chrome DevTools](http://code.tutsplus.com/tutorials/developing-with-sass-and-chrome-devtools--net-32805) * Ben Frain: [Faster Sass debugging and style iteration with source maps, Chrome Web Developer Tools and Grunt](http://benfrain.com/add-sass-compass-debug-info-for-chrome-web-developer-tools/) * Google Developer Docs: [Working with CSS Preprocessors](https://developers.google.com/chrome-developer-tools/docs/css-preprocessors) * HTML5Rocks: [Sass/CSS Source Map debugging](http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/#toc-key-performance) {^ .list--indented } [^1]: At least here's how you make it happen for Sass; I know nothing about Less, much less Less with Grunt. If you prefer Less, head over to the [Mozilla Hack blog post](https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/) and check out their instructions.