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.
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:
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.
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.