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:
- Frameworks and Tools (Compass, Bourbon, Susy Grids etc.)
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:
- Open developer tools and click the settings “hamburger” icon (top right) to open Settings
- Under General, look for the “Sources” section. Also, select “Enable CSS source maps”.
- 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:
sass --watch sass/screen.scss:stylesheets/screen.css --sourcemap
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.
var sourcemaps = require('gulp-sourcemaps');
// will write the source maps inline in the compiled CSS files
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:
sourcemap = true