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


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

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

As CSS pre-processors, minifiers, and JavaScript transpilers have grown to be conventional it really is increasingly tough to debug the rule running within the web browser as a result of distinctions utilizing the initial supply rule.

For instance, if you are using CoffeeScript (which compiles to JavaScript) you will not see CoffeeScript while debugging into the web browser. Rather, you will see put together JavaScript. The exact same problem 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 while the lower-level languages they compile down to (JavaScript and CSS). Source maps permit you to look at source that is originalthe CoffeeScript or Sass) rather than the put together JavaScript or CSS while debugging.

In training, for Sass users, this means whenever you examine a feature with designer tools, instead of seeing the CSS designs connected with that element, you can view the rule we actually worry about: the pre-compiled Sass.

Generating source maps for Sass

Getting use of this particular aspect within the web browser, you will need to produce a supply map apply for each supply file.

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

In the event that you try your production folder after operating that demand, you will observe that a remark happens to be included with the finish of this CSS that is generated file

This points to a file that is additional was made during compilation: screen.css.map , which – whilst the title suggests – is exactly what maps most of the put together CSS back again to the foundation Sass declarations. In the event that you’re enthusiastic about the details with this file and exactly how maps mail order wives that are source work, check out Ryan Seddon’s Introduction to JavaScript Source Maps over at HTML5Rocks. (Although the article shows that it is just about JavaScript, all source maps work exactly the same.)

Enabling supply maps into the web web browser

The 2nd thing we need to do to make the most of supply maps is always to be sure that our web browser understands search for them. Chrome, Firefox and Safari all have help for supply maps.

If you are making use of Chrome, supply maps are actually an element of the core feature set, and that means you don’t need to monkey around in chrome://flags any longer. Just start the devTools settings up and toggle the Enable CSS supply Maps option:

For Firefox users, source maps have been in variation 29. You are able to allow them within the Toolbox Alternatives menu (the apparatus icon) or by right-clicking any place in the Style Inspector’s guideline view and choosing the Show sources that are original. (more information is present in the Mozilla web log.)

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

Another tool inside our gear

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

In the same way Firebug as well as its successors drastically enhanced our ability to debug within the web web browser, supply maps boost the level of y our diagnostic abilities. By permitting us to directly access our pre-compiled rule, we are able to find and fix dilemmas faster than ever before. Given that i am utilizing supply maps for some 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 an internet designer situated in new york. He is passionate about producing forward-compatible, standards-compliant, and available sites with HTML, CSS, and JavaScript. He could be presently used at R/GA and is particularly readily available for freelance work.

Relate with Tim on twitter at @timhettler.

The Sass Method covers the news that is latest and subjects on handcrafting CSS with Sass and Compass. We utilize a publishing that is open and count on efforts through the Sass community via our GitHub task.