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 transpilers have grown to be main-stream it’s increasingly tough to debug the rule operating within the web web browser due to distinctions using the initial supply rule.
For instance, if you are using CoffeeScript (which compiles to JavaScript) you may not see CoffeeScript while debugging within the web browser. Rather, you will see put together JavaScript. The exact same issue exists for Sass which compiles down seriously to CSS.
Supply maps look for to bridge the space between higher-level languages like CoffeeScript and Sass together with lower-level languages they compile down to (JavaScript and CSS). Supply maps enable you to understand source that is originalthe CoffeeScript or Sass) as opposed to the put together JavaScript or CSS while debugging.
In training, for Sass users, which means that whenever you examine a component with designer tools, instead 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
To have use of this particular feature into the web web browser, you ought to produce a supply map apply for each source file.
For Sass, this might 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 operating that demand, you are going to realize that a remark happens to be included with the finish associated with the generated CSS file:
This points to a extra file that was made during compilation: screen.css.map , which – whilst the title suggests – is exactly what maps every one of the put together CSS returning to the origin Sass declarations. In the event that you’re thinking about the details of the file and exactly how source maps actually work, consider Ryan Seddon’s Introduction to JavaScript Source Maps over at HTML5Rocks. (Although the article means that it is only about JavaScript, all supply maps work exactly the same.)
Enabling supply maps into the web web web browser
The thing that is second should do to make the most of supply maps would be to make sure our web foreign brides web browser understands search for them. Chrome, Firefox and Safari all have help for supply maps.
If you’re making use of 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 up the DevTools settings and toggle the Enable CSS supply Maps choice:
For Firefox users, source maps have been in variation 29. You are able to allow them within the Toolbox Options menu (the apparatus symbol) or by right-clicking any place in the Style Inspector’s guideline view and picking the Show initial sources option. (more details can be acquired in the Mozilla weblog.)
Safari is really 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 inside our gear
As soon as supply maps are enabled in your web web browser of preference, the origin guide for virtually any design will alter through the generated CSS into the supply Sass, because of the line quantity. Amazing!
Just like Firebug as well as its successors drastically improved our ability to debug when you look at the web browser, supply maps boost the level of y our diagnostic abilities. By permitting us to directly access our pre-compiled rule, we will find and fix issues faster than ever before. Given that i am utilizing 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 an internet developer located in new york. He is passionate about creating forward-compatible, standards-compliant, and accessible internet sites with HTML, CSS, and JavaScript. He could be presently used at R/GA and it is designed for freelance work.
Connect 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 use a available publishing model and count on efforts through the Sass community via our GitHub task.