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

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

One of several exciting brand new features in Sass 3.3 that each and every designer should simply take benefit of is source maps.

As CSS pre-processors are russian brides legit, minifiers, and JavaScript transpilers are becoming conventional it really is increasingly tough to debug the rule operating within the web web browser due to differences with all the source code that is original.

For instance, you won’t see CoffeeScript while debugging in the browser if you use CoffeeScript (which compiles to JavaScript. Rather, you will see compiled JavaScript. The exact same issue exists for Sass which compiles right down to CSS.

Supply maps look for to bridge the gap 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 start to see the initial supply (the CoffeeScript or Sass) as opposed to 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

Getting use of this feature when you look at the browser, you will need to produce a supply map apply for each supply file.

For Sass, this can be as simple as incorporating a banner to Sass’s demand line device:

In the event that you try looking in your production folder after running that demand, you are going to realize that a remark is put into the finish regarding the generated CSS file:

This points to a extra file that is made during compilation: screen.css.map , which – whilst the name suggests – is exactly what maps all the put together CSS back once again to the origin Sass declarations. In the event that you’re enthusiastic about the details of the 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 into the web browser

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

If you should be using Chrome, supply maps are actually the main core feature set, so that you do not have 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 choosing the Show sources that are original. (more details can be acquired during the Mozilla web log.)

Safari is really a bit prior to the bend with regards to source map support. In case a map file is detected, recommendations are immediately changed towards the source-mapped files, no setup necessary.

Another device inside our gear

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

Just like Firebug and its own successors drastically enhanced our ability to debug into the web web browser, supply maps raise the level of y our capabilities that are diagnostic. By permitting us to directly access our pre-compiled rule, we will get and fix dilemmas faster than ever before. Given that i am source that is using 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 an internet designer situated in nyc. He is passionate about producing forward-compatible, standards-compliant, and websites that are accessible HTML, CSS, and JavaScript. He could be presently used at R/GA and it is readily available for freelance work.

Relate solely to 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 task.