Tincr + Sass

In an earlier post I talked about using Tincr to help automate the frontend development workflow instead of flipping between the text editor and the browser. Tincr is great when you are working with straight CSS or JS but so often devs like the benefits of working with a compilation language, like Sass or Coffeescript. While we haven’t gotten lucky enough for Coffeescript support in Chrome, Sass support is available.

Sass Setup

1. Install Tincr. The setup instructions vary depending on the type of project. (For the sake of brevity, the rest of this post will assume you are running with a simple http server or loading the files directly into the browser. There are instructions on how to setup Tincr for Rails projects but I haven’t tried it yet so I can’t speak to the difficulty.)

2. Turn on Developer Experiments in Chrome. Go to Chrome’s experiment settings (chrome://flags/), enable the “Developer Tools Experiments” and restart your browser.

3. Enable “Support for Sass”. Open the developer tools settings and select “Support for SASS” under the new Experiments tab.

sass experiment settings

4. Include File Info In Sass Compilation. Sass files will need to include file location information for parsing the source in Chrome. If you are using the Sass gem to generate your css files during development, include the flag --debug-info on the command line with the --watch command. You can also tell Compass to compile Sass files with debug info in a Rack applications config file:

config.sass_options = {:debug_info => true}

This will create a line before each rule in your css that starts with

@media -sass-debug-info{...}

NOTE: You’ll probably want to regenerate the files without the debug info for production environments…Don’t forget to leave off the debug flag before compiling for the real world!!

5. Enable Source Maps. Source Maps are a breakdown of a compiled files initial location. Since we’re including the Sass file info in compilation, we’ll need to make sure the browser can read that info. To do this, enable source maps in the Chrome under the General Settings tab for the Developer Tools.

enable source maps

We can begin editing the file by either clicking the Sass file location shown in the inspector or finding it in the Sources tab in the Developer Tools.

sass location

Next up, tools for reloading HTML files.