One of many exciting brand brand new features in Sass 3.3 that each designer should simply just take benefit of is maps that are source.
This means that when you hot russian brides 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 use of this particular aspect into the web web web browser, you ought to produce a supply map apply for each source file.
For Sass, this will be as easy as incorporating a banner to Sass’s command line device:
In the event that you try looking in your production folder after operating that demand, you will observe that a remark was put into the conclusion regarding the generated CSS file:
Enabling supply maps when you look at the web web browser
The 2nd thing we should do to make the most of supply maps would be to be sure that our web browser knows search for them. Chrome, Firefox and Safari all have help for supply maps.
If you are utilizing Chrome, supply maps are now actually area of the core feature set, which 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’ll allow them within the Toolbox Options menu (the gear icon) or by right-clicking any place in the Style Inspector’s guideline view and choosing the Show initial sources choice. (more details can be obtained in the Mozilla web log.)
Safari is a little prior to the bend when it comes to supply map help. No configuration necessary if a map file is detected, references are automatically changed to the source-mapped files.
Another device inside our belt
As soon as supply maps are enabled in your web browser of preference, the origin guide for virtually any design will alter through the generated CSS to your supply Sass, because of the line quantity. Amazing!
In the same way Firebug and its own successors drastically enhanced our ability to debug when you look at the browser, supply maps boost the level of y our diagnostic abilities. By permitting us to directly access our code that is pre-compiled will find and fix dilemmas faster than ever before. 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 Method covers the news that is latest and subjects on handcrafting CSS with Sass and Compass. We use a available publishing model and depend on efforts through the Sass community via our GitHub project.