--- title: Sass Source Maps + Chrome = Magic teaser: Edit your Sass files directly within Chrome DevTools. tags: sass,design,chrome,devtools author: Mike Borsare published_on: 2015-03-26 --- Have you ever wanted your changes from Chrome's DevTools to stick – or wanted to edit Sass files directly in the inspector? If your typical workflow involves making design changes within DevTools only to return to your text editor for application, you know the pitfalls. It's hard to remember what changes you actually made and if you're not using LiveReload you'll need to refresh the browser to see them in action. The whole thing is exhausting. Thankfully, there's a better way. By using workspaces and Sass source maps with DevTools you'll be able to edit your Sass directly within the inspector. On top of that, your changes will persist to your source files! No longer will you have to hop between the browser and your text editor. By setting up a workspace, Chrome acts as your editor. ### Sass source maps Sass is a preprocessor. That means it's a language that compiles down to another, in this case our old friend CSS. That's where Sass source maps come in. They provide a way of bridging the divide between CSS and Sass. When DevTools spots a Sass source map it can point directly to the Sass source files rather than the generated CSS. This is incredibly helpful when it comes time to debug or tweak design. ### Workspaces A workspace in Devtools is really just a way for Chrome to understand where the source files for the current page live. This gives DevTools the power to act as your editor. In this post we're modifying Sass files, but the amazing thing about a workspace in DevTools is that you can edit any type of file and have your changes persist to disk. For further reading, I recommend [the Chrome docs] (https://developer.chrome.com/devtools/docs/workspaces "Workspaces") on the matter. ## Let's get busy If you don't have Sass installed already, you'll need to do that. Let's venture out to the Terminal and run a simple command. Open that bad boy up and type: `gem install sass`. It will look something like this. ![gem install sass](https://images.thoughtbot.com/sass-source-maps/00-gem-intall-sass.gif) ### Make sure DevTools is ready to go The second thing you'll need to do is make sure Chrome knows you're going to use source maps. To do this pop open the inspector with `command + option + i` (⌘ + ⌥ + i) or right click anywhere on the page and select `inspect element`. Now Hit the little gear in the top right hand corner to access your settings. Find "Sources" under the "General" column and then make sure both "Enable CSS source maps" and "Auto-reload generated CSS" are checked. ![tell the inspector what's up](https://images.thoughtbot.com/sass-source-maps/01-tell-chrome-whats-up.gif) ### Run a sass watch Now head back to your terminal and get Sass cranked up. You'll want to tell Sass the file to compile and output on this step. The syntax for this is as such. Run a `sass --watch input.scss:output.css`. (Starting with Sass version 3.4 source maps are output by default. If you're using any version between 3.3–3.3.14 you'll have to add an extra flag like so `sass --watch --sourcemap input.scss:output.css`, maps aren't available prior to version 3.3.) The watch flag we're using tells Sass to keep its eye on your Sass files for changes. Now every time you make a change and save, things will recompile automatically. ![sass watch](https://images.thoughtbot.com/sass-source-maps/02-sass-watch.gif) ### Create a workspace Marvelous, now let's create a workspace in Chrome. Reopen the inspector using: `command + option + i` (⌘ + ⌥ + i) and click your old friend the gear. After that, click on "Workspace" from the left menu. Lastly, click "Add folder" and then select your project folder. Chrome is going to ask you for full access to that directory – go ahead and allow it. ![create a workspace](https://images.thoughtbot.com/sass-source-maps/03-create-workspace.gif) ### Map to network resource Okay, just one more step for all our work to come together. We need to tell DevTools where the source files exist locally. To do this, find your `input.scss` file within the folder we just added to the workspace. Once you find it, give it a right click and finally "Map to network resource." That's it! Chrome will refresh and you're ready to go. ![create a network resource](https://images.thoughtbot.com/sass-source-maps/04-map-network-resource.gif) ### Edit directly in DevTools Now go ahead and inspect an element. You'll see that Chrome knows exactly where in your Sass file the styles reside thanks to the source map. When I `command + click` on a declaration it takes me directly to the proper spot in the source Sass file – amazing. From here, we can edit away. For instance, I'm not really feeling the background color on this page. I think I'll change it. You can see in the .gif that when I change the background color in Chrome and save it it's reflected in my source file. What?! Awesome right? ![make some edits](https://images.thoughtbot.com/sass-source-maps/05-edit-it-up.gif) ## Technical considerations ### What about Rails? Unfortunately, if you're using the `sass-rails` gem there's a bit of an issue at the moment. Sass brought source maps into the fray with version 3.3. Sass-rails uses an older version (3.2) of Sass that doesn't output source maps. So, until Sass-rails updates its Sass dependency to a newer version you're out of luck. There is a gem called [Sass-rails-source-maps](https://github.com/vhyza/sass-rails-source-maps) that offers an approach to try and get things working. Have at it, but I couldn't get things going on my end. ### Git If you're using Git and want to keep things tidy it's probably a good idea to add `*.css.map` to your global `.gitignore`. This is typically in your home directory, i.e. `~/.gitconfig`. ## Go forth Now you know how to use Sass source maps and create a workspace in DevTools to great effect. It's a technique that helps you save time, work smarter, and frees you from the shackles of moving back and forth between your editor and browser. Have fun with it!