Exciting brand new features – utilizing supply maps with Sass 3.3

Exciting brand new features – utilizing supply maps with Sass 3.3

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

As CSS pre-processors, minifiers, and JavaScript transpilers have grown to be conventional it’s increasingly hard to debug the rule running into the web web browser due to differences using the initial supply rule.

As an example, if you utilize CoffeeScript (which compiles to JavaScript) you may not see CoffeeScript while debugging when you look at the browser. Rather, you will see put together JavaScript. The exact same problem exists for Sass which compiles right down to CSS.

Supply maps look for to bridge the space between higher-level languages like CoffeeScript and Sass and also the languages that are lower-level compile down to (JavaScript and CSS). Source maps enable you to start to see the source that is originalthe CoffeeScript or Sass) rather than 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 into the web browser, you’ll want to produce a source map file for each supply file.

For Sass, this might be 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 will realize that a remark is included with the conclusion of this CSS that is generated file

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

Enabling supply maps when you look at the browser

The thing that is second should do to make the most of supply maps is always to be sure that our web web web browser understands try to find them. „Exciting brand new features – utilizing supply maps with Sass 3.3“ weiterlesen