Exciting brand new features – making use of supply maps with Sass 3.3

One of several exciting brand brand brand new features in Sass 3.3 that each developer should simply just just take benefit of is source maps.

As CSS pre-processors, minifiers, and JavaScript transpilers are becoming mainstream its increasingly hard to debug the rule operating within the browser as a result of distinctions aided by the initial supply rule.

For instance, you won’t see CoffeeScript while debugging in the browser if you use CoffeeScript (which compiles to JavaScript. Alternatively, you will see put together JavaScript. The problem that is same for Sass which compiles right down to CSS.

Supply maps look for to bridge the space between higher-level languages like CoffeeScript and Sass additionally the lower-level languages they compile down to (JavaScript and CSS). Supply maps permit you to start to see the initial supply (the CoffeeScript or Sass) as opposed to the put together JavaScript or CSS while debugging.

In training, for Sass users, which means whenever you examine a component with designer tools, instead of seeing the CSS designs connected with that element, you can view the code we actually worry about: the pre-compiled Sass.

Generating source maps for Sass

To obtain use of this particular feature within the web web web browser, you will need to create a source map apply for each supply file.

For Sass, this will be as simple as incorporating a banner to Sass’s demand line tool:

In the event that you look in your production folder after operating that demand, you are going to observe that a comment was put into the conclusion regarding the CSS that is generated file

This points to a file that is additional is made during compilation: , which – whilst the title suggests – is exactly what maps most of the put together CSS back again to the origin Sass declarations. In the event that you’re thinking about the details of the file and exactly how source maps actually work, discover Ryan Seddon’s Introduction to JavaScript Source Maps over at HTML5Rocks. (Although the article means that it really is just about JavaScript, all supply maps work exactly the same.)

Enabling supply maps when you look at the web browser

The 2nd thing we should do to make the most of supply maps is always to make sure our web web browser understands try to find them. Chrome, Firefox and Safari all have support for supply maps.

If you should be making use of Chrome, supply maps are actually an element of the core feature set, and that 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 are able 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 choosing the Show sources that are original. (more information can be acquired during the Mozilla weblog.)

Safari is a little prior to the bend with regards 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 guide for every single design can change through the generated CSS to your supply Sass, down to the line quantity. Amazing!

Just like Firebug and its own successors drastically enhanced our ability to debug within the web browser, supply maps boost the level of our capabilities that are diagnostic. By permitting us to directly access our code that russian mail order wives is pre-compiled will get and fix dilemmas faster than in the past. Given that i am utilizing supply maps for a couple months, i can not imagine working without them.

Now you have supply maps enabled for Sass, you might want to learn to make use of supply maps with JavaScript.

Tim Hettler

Tim Hettler is a internet designer located in new york. He is passionate about producing forward-compatible, standards-compliant, and websites that are accessible HTML, CSS, and JavaScript. He could be presently employed at R/GA and it is designed for freelance work.

Connect to Tim on twitter at @timhettler.

The Sass Method covers the latest news and topics on handcrafting CSS with Sass and Compass. We make use of a publishing that is open and depend on contributions through the Sass community via our GitHub project.

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>