Exciting new features – utilizing supply maps with Sass 3.3
One of many exciting brand brand new features in Sass 3.3 that each designer should just take benefit of is maps that are source.
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
To have usage of this particular aspect into the web browser, you ought to create a supply map file for each supply file.
For Sass, that is as simple as including a banner to Sass’s demand line device:
In the event that you try your production folder after running that demand, you are going to realize that a remark happens to be put into the conclusion of this generated CSS file:
Enabling supply maps within the web browser
The 2nd thing we have to do to benefit from supply maps would be to make sure our web web web browser understands seek out them. Chrome, Firefox and Safari all have help for supply maps.
If you are utilizing Chrome, source maps are actually area of the core feature set, and that means you do not asian women american men have to monkey around in chrome://flags any longer. Just start the devTools settings up 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 Alternatives menu (the apparatus icon) or by right-clicking any place in the Style Inspector’s rule view and choosing the Show initial sources choice. (more information can be acquired in the Mozilla web log.)
Safari is really a bit in front of the bend when it comes to source map support. In case a map file is detected, sources are automatically changed into the source-mapped files, no setup necessary.
Another device inside our gear
When supply maps are enabled in your web browser of preference, the origin guide for each design will alter through the CSS that is generated to source Sass, because of the line quantity. Amazing!
In the same way Firebug as well as its successors drastically enhanced our ability to debug into the 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 in the past. Given that i am source that is using for some months, I can’t imagine working without them.
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 make use of a available publishing model and depend on efforts through the Sass community via our GitHub task.