One of many exciting brand brand new features in Sass 3.3 that each and every designer should 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 usage of this particular aspect into the web web browser, you’ll want to create a supply map apply for each supply file.
For Sass, it is as simple as including a flag 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 CSS that is generated file
Enabling supply maps within the web browser
The thing that is second should do to benefit from supply maps is always to be sure that russian brides at myukrainianbrides.org our web web web browser understands search for them. Chrome, Firefox and Safari all have help for source maps.
If you are utilizing Chrome, supply 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. Just open 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 within 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 in the Mozilla weblog.)
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 within our gear
As soon as supply maps are enabled in your web web browser of preference, the foundation guide for virtually any style will alter through the generated CSS into the supply Sass, down to the line quantity. Amazing!
In the same way Firebug and its own successors drastically enhanced our ability to debug when you look at the web web web browser, supply maps raise the level of y our capabilities that are diagnostic. By enabling us to directly access our code that is pre-compiled will get and fix issues faster than ever before. Given that i have been source that is using for a couple months, i can not imagine working without them.
Interact 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 publishing that is open and count on efforts through the Sass community via our GitHub task.