CustomStrap 2.4 is here: hot SASS recompile

This update brings a couple features which are really useful for everyone who likes to mingle with CSS / SASS code - enabling a much easier workflow when adding your own style. If you don't know anything about SASS/SCSS and just talk plain CSS, read on - it might be the good moment to get your feet wet into SASS waters - as it can't get any simpler than that.

As you might already know, inside the CustomStrap child theme there is a folder named sass where there are two files:

_theme-custom.scss

This file is where you are welcome to add your own styling customizations ("CSS / SCSS rules") to CustomStrap.
By the way, if you don’t know what SASS/SCSS is, please note that you can just add plain CSS and it will work perfectly.

A note for SASS newbies 

In this file you can also use the super useful @import statement, to structure your code in different files, which will be merged together - a life saver on larger projects - say goodbye to gigantic CSS files to debug. For example you might create an _animations.scss file containing all the CSS code responsible of animations, and add it using this code:

@import "_animations"; //add the animations file

We use this exact line of code in our scss file - and it's a lifesaver.
Please note that partial file names should start with an underscore ( _ ).

_theme_variables-custom.scss

This file is meant to contain your custom variable overrides, to customize your Bootstrap settings thoroughly. The basics can be tweaked by the Customizer’s graphical interface, but if you want to get your hands dirty with more options, this  is the right place. If you don't know what we're talking about, you might want to have a look at this page of the Bootstrap documentation.

Automatic SCSS recompile ^New

Now the good news is that since version 2.4, every change to the sass folder, eg adding or editing any of the SCSS files in it, will be automatically “seen” by the Theme, which will force the CSS bundle recompile - picking automatically your new changes.

This behaviour is quite the standard for all our localhost coding cats with command line developer tools installed on their machine, à la npm sass, and it’s nice to have without having to install anything.

This feature can bring the joy of developing with SASS / SCSS to all those folks which have been grown editing sites live on the server, “cowboy coding” style, without the joy (and pain) of having a local development environment.

Tech note for your peace of mind

From a technical standpoint, this “watcher” is achieved without any performance overhead, as only when an administrator loads a frontend page, a checksum of the actual  sass folder is compared with the checksum associated at the last scss compile operation.

If the checksums differ, instead of displaying the web page, you’ll see the recompile screen, so you will be aware of every detail of what’s happening.

Better SCSS error handling

In case you added some custom SCSS code which is not correct, now the CustomStrap SCSS compiler will clearly show the error details, printing the error code returned by the compiler, which indicates the precise code line where the problem arises.

Hope you enjoyed this update, please feel free to build amazing sites with CustomStrap.

May be the power of Bootstrap and SASS be with you!