Exciting brand brand new features – making use of supply maps with Sass 3.3

Among the exciting new features in Sass 3.3 that each designer should just take benefit of is source maps.

As CSS pre-processors, minifiers, and JavaScript transpilers are becoming conventional it really is increasingly hard to debug the rule operating into the web browser as a result of distinctions with all the initial supply rule.

As an example, you won’t see CoffeeScript while debugging in the browser if you use CoffeeScript (which compiles to JavaScript. Rather, you’ll see put together JavaScript. The exact same issue exists for Sass which compiles right down to CSS.

Supply maps look for to bridge the space between higher-level languages like CoffeeScript and Sass therefore the languages that are lower-level compile down to (JavaScript and CSS). Supply maps permit you to begin to see the source that is originalthe CoffeeScript or Sass) rather than the put together JavaScript or CSS while debugging.

This means that when you inspect an element with developer tools, rather than seeing the CSS styles associated with that element, you can see the code we really care about: the pre-compiled Sass in practice, for Sass users.

Generating source maps for Sass

To obtain usage of this particular feature into the web browser, you’ll want to produce a supply map apply for each supply file.

For Sass, this will be as simple as including a banner to Sass’s command line device:

In the event that you try looking in your production folder after running that demand, you are going to realize that a comment happens to be included with the conclusion for the generated CSS file:

This points to a file that is additional was made during compilation: screen.css.map , which – because the title suggests – is exactly what maps most of the compiled CSS back into the foundation Sass declarations. In the event that you’re thinking about the details for this file and exactly how source maps actually work, discover Ryan Seddon’s Introduction to JavaScript Source Maps over at HTML5Rocks. (Although the article shows that it is just about JavaScript, all supply maps work exactly the same.)

Enabling supply maps when you look at the web browser

The second thing we should do to benefit from supply maps would be to be sure that our web web web browser understands try to find them. Chrome, Firefox and Safari all have support for supply maps.

If you should be utilizing Chrome, supply maps are now actually the main core feature set, so that you don’t need to monkey around in chrome://flags any longer. Merely start the devTools settings up and toggle the Enable CSS Source Maps choice:

For Firefox users, source maps have been in variation 29. You can easily allow them when you look at the Toolbox Alternatives menu (the apparatus symbol) or by right-clicking any place in the Style Inspector’s guideline view and picking the Show sources that are original. (more information is present during the Mozilla weblog.)

Safari is a little prior to the curve when it comes to supply map help. No configuration necessary if a map file is detected, references are automatically changed to the source-mapped files.

Another device inside our gear

When supply maps are enabled in your web browser of preference, the foundation guide for each and every design will alter through the generated CSS to your supply Sass, down seriously to the line number. Amazing!

In the same way Firebug as well as its successors drastically enhanced our ability to debug into the web web web browser, supply maps boost the level of our diagnostic abilities. By permitting us to directly access our code that is pre-compiled will find and fix issues mail order brides faster than ever before. Given that i have been making use of supply maps for a couple months, i can not imagine working without them.

Now you may want to learn how to use source maps with JavaScript that you have source maps enabled for Sass.

Tim Hettler

Tim Hettler is a internet designer located in new york. He is passionate about creating forward-compatible, standards-compliant, and available web sites with HTML, CSS, and JavaScript. He could be presently used at R/GA and is additionally designed for freelance work.

Relate solely to Tim on twitter at @timhettler.

The Sass Method covers the news that is latest and subjects on handcrafting CSS with Sass and Compass. We make use of a available publishing model and depend on contributions through the Sass community via our GitHub task.