Among the exciting brand brand new features in Sass 3.3 that each designer should simply simply take benefit of is source maps.
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
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.
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.