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

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

As CSS pre-processors, minifiers, and JavaScript transpilers have grown to be conventional it really is increasingly hard to debug the code operating in the web browser as a result of differences aided by the initial supply code.

As an example, 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 plus the languages that are lower-level compile down to (JavaScript and CSS). Supply maps enable you to look at source that is originalthe CoffeeScript or Sass) as opposed to the put together JavaScript or CSS while debugging.

In practice, for Sass users, which means whenever you examine a feature with designer tools, as opposed to seeing the CSS designs related to that element, you can observe the code we actually worry about: the pre-compiled Sass.

Generating source maps for Sass

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

For Sass, this really is as simple as incorporating a banner to Sass’s demand line device:

In the event that you try your production folder after running that demand, you will observe that a remark happens to be put into the finish regarding the generated CSS file:

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