September 1, 2017 Aneta Camo   Techblog Testing

How to track Sass files when using Jekyll

Don’t let Jekyll hide files from you anymore

Jekyll automatically handles wrapping and compiling Sass into Css. That would be fine if it did not delete the source map and made it completely impossible to navigate back - Let’s see how to fix this!

In Praqma, we develop our websites using Jekyll with Sass files. We love it and it mostly work great for us. But Jekyll is sometimes a bit too clever for us.

When using Sass, all the code fragments are compiled and translated into one complex and unordered Css file that is interpreted by the browser.

To help navigate back to the original Sass source files - for example when using developer tools like the Google Chrome inspector - a source map is being generated and updated together with every Sass-to-Css update. It is represented by two files:

_site/css/main.css
_site/css/main.css.map

Jekyll automatically takes over for the job of wrapping and compiling Sass into Css after it has already translated itself.

That would be okay if the job was not done in such a way that it becomes impossible to navigate to the original Sass source files. By running Jekyll, those two files that were just generated are being overwritten and deleted.

So, in the developer console, instead of linking us to the right Sass file with the right fragments of the code, we are being directed to the complex and unordered Css file, which is even hard to display properly.

This makes it hard to develop and debug the interface of the website. It is a great idea to prevent Jekyll (temporarily) from deleting those two files. To do so, we need to exclude Css and Sass from Jekyll’s activity. The code is already there, waiting to be commented out.

When we do this, the source map remains and we can easily navigate to the source, fix the issues and get it back to its previous state.

Preparation

First, we need these two steps done in the code:

In the file css/main.scss, comment out line 1: front matter
In the file _config.yml, uncomment line 26: exclude

Watch out!

Second, we set up the service that keeps watching out for updates and keeps updating the whole chain of those two files. So anytime a change is made in any .sass file, it is linked into the main Sass file, and from there compiled into the Css file. In your command line, execute a command like this:

sass -I _sass --watch css/main.scss:_site/css/main.css

And we are ready to go! Start Jekyll serving in the command line:

jekyll serve

That should give us a good working environment for updating the interface, keep us on track and easily navigate within the stylesheets. Notice however, that once our changes are done and tested, and before we commit code, it is important to reverse the two steps in the code. Like this:

In the file css/main.scss, uncomment line 1: front matter
In the file _config.yml, comment out line 26: exclude:

That’s it! Happy debugging!