Among the exciting brand brand brand new features in Sass 3.3 that each and every designer should just simply take benefit of is source maps.
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 obtain use of this particular aspect when you look at the web web browser, you will need to create a supply map apply for each supply file.
For Sass, it is as simple as incorporating 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 was put into the conclusion for the https://myukrainianbrides.org/russian-brides generated CSS file:
Enabling supply maps into the web web browser
The thing that is second should do to make use of supply maps would be to make sure our web browser knows seek out them. Chrome, Firefox and Safari all have help for supply maps.
If you are making use of Chrome, supply maps are actually area of the core feature set, which means you do not have to monkey around in chrome://flags any longer. Merely start the devTools settings up and toggle the Enable CSS supply Maps option:
For Firefox users, source maps have been in variation 29. You can easily allow them when you look at 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 acquired during the Mozilla weblog.)
Safari is really a bit in front of 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 within our gear
When supply maps are enabled in your web browser of preference, the origin reference for each and every design can change through the generated CSS into the supply Sass, as a result of the line quantity. Amazing!
Just as Firebug and its own successors drastically enhanced our ability to debug within the browser, supply maps raise the level of our diagnostic abilities. By permitting us to directly access our pre-compiled rule, we will find and fix issues faster than in the past. Given that i have been making use of supply maps for some months, i can not imagine working without them.
Connect to Tim on twitter at @timhettler.
The Sass Method covers the news that is latest 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.