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

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

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.

As CSS pre-processors, minifiers, and JavaScript transpilers are becoming conventional it really is increasingly hard to debug the rule running within the web web browser as a result of distinctions utilizing the source code that is original.

For instance, you won’t see CoffeeScript while debugging in the browser if you use CoffeeScript (which compiles to JavaScript. Alternatively, you will see compiled JavaScript. The exact same issue exists for Sass which compiles down seriously to CSS.

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

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:

This points to a file that is additional is made during compilation: screen.css.map , which – once the title suggests – is really what maps most of the compiled CSS back again to the foundation Sass declarations. In the event that you’re thinking about the details of the file and just how maps that are source work, take a look at Ryan Seddon’s Introduction to JavaScript Source Maps over at HTML5Rocks. (Although the article shows that it is just about JavaScript, all supply maps work exactly the same.)

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.

Now you may want to learn how to use source maps with JavaScript that you have source maps enabled for Sass.

Tim Hettler

Tim Hettler is an 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 used at R/GA and it is designed for freelance work.

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.

Leave a Reply