Exciting new features – utilizing supply maps with Sass 3.3

24
Dec

Exciting new features – utilizing supply maps with Sass 3.3

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

As CSS pre-processors, minifiers, and JavaScript mail order bride transpilers have grown to be conventional it really is increasingly hard to debug the rule operating within the web web web browser as a result of distinctions with all the initial supply rule.

For instance, if you are using CoffeeScript (which compiles to JavaScript) you will not see CoffeeScript while debugging when you look at the web browser. Alternatively, you will see put together JavaScript. The problem that is same for Sass which compiles down seriously to CSS.

Supply maps look for to bridge the gap between higher-level languages like CoffeeScript and Sass plus the languages that are lower-level compile down to (JavaScript and CSS). Supply maps enable you to start to see the initial source (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 related to that element, you can observe the rule we actually worry about: the pre-compiled Sass.

Generating source maps for Sass

Getting usage of this particular feature into the web web browser, you will need to create a source map file for each supply file.

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

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

This points to a extra file that is made during compilation: screen.css.map , which – since the name suggests – is really what maps all the put together CSS back again to the foundation Sass declarations. In the event that you’re interested in the details for this file and just how source maps actually work, take a look at 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 equivalent.)

Enabling supply maps into the web web web browser

The thing that is second should do to make use of supply maps is always to be sure that our browser understands search for them. Chrome, Firefox and Safari all have help for source maps.

If you are utilizing Chrome, supply maps are actually the main core feature set, and that means you do not have to monkey around in chrome://flags more. Merely start the devTools settings up and toggle the Enable CSS supply Maps choice:

For Firefox users, source maps are in variation 29. You’ll 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 initial sources choice. (more information can be obtained during the Mozilla weblog.)

Safari is just a bit in front of the bend with regards to supply map help. If your map file is detected, recommendations are immediately changed to your source-mapped files, no configuration necessary.

Another device inside our gear

As soon as supply maps are enabled in your web web browser of preference, the foundation guide for each design can change through the generated CSS towards the supply Sass, because of the line quantity. Amazing!

In the same way Firebug and its own successors drastically enhanced our ability to debug within the browser, supply maps raise the level of our diagnostic abilities. By enabling us to directly access our pre-compiled rule, we will find and fix issues faster than in the past. 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 new york. He is passionate about producing forward-compatible, standards-compliant, and websites that are accessible HTML, CSS, and JavaScript. He’s presently used at R/GA and is additionally readily available for freelance work.

Relate with Tim on twitter at @timhettler.

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

Leave a Comment