Exciting brand new features – utilizing supply maps with Sass 3.3

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

As CSS pre-processors, minifiers, and JavaScript transpilers are becoming conventional it really is increasingly hard to debug the rule operating when you look at the web browser as a result of distinctions with all the source code that is original.

As an example, you won’t see CoffeeScript while debugging in the browser if you use CoffeeScript (which compiles to JavaScript. Alternatively, you will see compiled JavaScript. The problem that is same russian brides for Sass which compiles right down to CSS.

Supply maps look for to bridge the gap between higher-level languages like CoffeeScript and Sass while the languages that are lower-level compile down to (JavaScript and CSS). Supply maps enable you to start to see the initial supply (the CoffeeScript or Sass) as opposed to the compiled JavaScript or CSS while debugging.

In training, for Sass users, this means whenever you examine a feature with designer tools, in the place 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

To get use of this particular feature when you look at the web web browser, you’ll want to produce a supply map apply for each supply file.

For Sass, this is certainly as simple as including a banner to Sass’s demand line tool:

In the event that you try looking in your production folder after operating that demand, you are going to realize that a remark happens to be put into the conclusion associated with the CSS that is generated file

This points to a extra file that is made during compilation: screen.css.map , which – because the title suggests – is really what maps all the put together CSS returning to the origin Sass declarations. In the event that you’re thinking about the details with this file and exactly how maps that are source work, have a look at Ryan Seddon’s Introduction to JavaScript Source Maps over at HTML5Rocks. (Although the article means that it really is just about JavaScript, all supply maps work the exact same.)

Enabling supply maps when you look at the web web browser

The thing that is second have to do to benefit from supply maps is always to be sure that our web web browser knows search for them. Chrome, Firefox and Safari all have help for supply maps.

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

For Firefox users, source maps have been in variation 29. It is possible to allow them into 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 can be obtained at the Mozilla weblog.)

Safari is just a bit prior to the bend when it comes to supply map help. If your map file is detected, sources are immediately changed into the source-mapped files, no setup necessary.

Another device within our gear

When supply maps are enabled in your web web browser of preference, the origin guide for each design can change through the generated CSS into the supply Sass, down seriously to the line quantity. Amazing!

In the same way Firebug as well as its successors drastically enhanced our ability to debug within the web browser, supply maps boost the level of our capabilities that are diagnostic. By enabling us to directly access our code that is pre-compiled will get and fix issues faster than in the past. Given that i have been source that is using for some months, i can not imagine working without them.

Now which you have supply maps enabled for Sass, you might discover ways to make use of supply maps with JavaScript.

Tim Hettler

Tim Hettler is an internet designer located in new york. He is passionate about creating forward-compatible, standards-compliant, and available internet sites with HTML, CSS, and JavaScript. He’s presently used at R/GA and it is readily available for freelance work.

Relate with Tim on twitter at @timhettler.

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