Enhance Your Frontend Workflow Using Sass Source Maps

Tuesday, 10 February, 2015

In this post, we will try to explain how to solve one of the main flaws of using stylesheet languages (in our case Sass): native browser support which, at the current state, can read only CSS stylesheet files.

Enhance the Frontend Workflow

CSS preprocessors (or style sheet languages) like Sass, Less or Stylus are now standard tools for almost every modern front-end developer. They provide speed and flexibility to work with our style sheets but, with elements that every modern programming language has.

Some of these are:

You can learn more about CSS preprocessors at this link.

Because the list of advantages using CSS preprocessors is too long for this short-post, we will try to explain how to solve one of the main flaws of using style sheet languages (in our case Sass): native browser support which, at the current state, can read only CSS style sheet files.

In order to compile Sass file to CSS, we must use methods like:  using ruby language libraries, or nowadays, faster solutions like C/C++ Sass engine LibSass. To solve our main disadvantage, the best practice is to pass few flags (or options) to your preferred tool for compiling Sass.

First, we need to enable Source Maps in Chrome:

  1. Open developer tools and click the settings “hamburger” icon (top right) to open Settings
  2. Under General, look for the “Sources” section. Also, select “Enable CSS source maps”.
  3. Make sure the “Auto-reload generated CSS” is also selected.

In Sass versions 3.4+  source maps are enabled by default. By using the --parameter we can select which type of source map we want, or disable them altogether.

In older, legacy versions of Sass, like 3.3 we must add few flags (or options). For command line watch tasks:

If we are using javascript task runners (like Grunt or Gulp) to compile our Sass files we must add few lines to our gruntfile.js or gulpfile.js depending on the system you are using.

Here is the guide from the official gulp-sass section at npmjs.com.

gulp-sass can be used in tandem with gulp-sourcemaps to generate source maps for the SASS to CSS compilation. You will need to initialize gulp-sourcemaps prior to running the gulp-sass compiler and write the source maps after.

If we are using grunt-contrib-sass source maps are enabled by default, but with LibSass version of compiler grunt-sass, in order to see our sass files in Chrome we must pass this option to our grunt sass task:

And finally, for users of Compass framework simply add  this to your config.rb file:

Sanja Radić

Sanja is Marketing & Content Manager. She graduated in Faculty of Economics in Osijek, specialized in Business Informatics. She loves social media, new technologies, journalism, blogging and travel.

Comments

© 2017, All Rights Reserved