Exciting brand new features – utilizing supply maps with Sass 3.3
Among the exciting brand brand new features in Sass 3.3 that each and every designer should just just 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 connected with that element, you can view the rule we actually worry about: the pre-compiled Sass.
Generating source maps for Sass
To get use of this particular feature when you look at the web web browser, you’ll want to produce a supply map apply for each supply file.
For Sass, this is certainly as simple as including a banner to Sass’s demand line tool:
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 put into the conclusion associated with the CSS that is generated file
Enabling supply maps when you look at the web web browser
The thing that is second have to do to benefit from supply maps is always to be sure that our web web browser knows search for them. Chrome, Firefox and Safari all have help for supply maps.
If you should be utilizing 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 the devTools settings up and toggle the Enable CSS supply Maps choice:
For Firefox users, source maps have been in variation 29. It is possible to 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 sources that are original. (more information can be obtained at the Mozilla weblog.)
Safari is just 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 within our gear
When supply maps are enabled in your web web browser of preference, the origin guide for each design can change through the generated CSS into the supply Sass, down seriously to the line quantity. Amazing!
In the same way Firebug as well as its successors drastically enhanced our ability to debug within the web browser, supply maps boost the level of our capabilities that are diagnostic. By enabling us to directly access our code that is pre-compiled will get and fix issues faster than in the past. Given that i have been source that is using for some months, i can not imagine working without them.
Relate with Tim on twitter at @timhettler.
The Sass Method covers the latest news and subjects on handcrafting CSS with Sass and Compass. We utilize a publishing that is open and depend on efforts through the Sass community via our GitHub project.