Make your SASS or LESS code customizable!

May 10, 2015

I’ve recently been working on an inside task, which we write our own skin theme using SASS with a modular way. We devide files into variables, utils, buttons, header, tips etc. Then a natural idea come to my mind - if we want to change the color theme to different ones, radius of button more sharp, what should we do? The answers is to change each SASS variables line by line. Sure, it’s one way to make it, but it’s time consuming and little appreciate. We’re technicians, aren’t we?
There should be a routine script instead of us to do that. This is the way Bootstrap customize enlightens.

You see the most heavy hard work is dozens of input fields where you put into desired value, for other check boxs, they’re as simple as if your include them in your code or not. Then how will make your input custom value be back, and work in your ‘download’ code. There could be a read-write process for your variables.scss files, then it involes server side code, nodejs, ruby, php etc. Well, if you look into the code of docs Bootstrap on github github-bootstrap-docs, you disclose
the myth. Let’s crack into code, see what the code do.

All the heavy-lifting is made by file customizer.js, the call stack is generateCSS, generateLESS, generateCustomLess and in the end compileLESS. The interesting thing is there’s not any logic relating with file reading/writing, it’s all client-side JavaScript code. How can it be? Well, if you look into function of generateLESS,

functiongenerateLESS(lessFilename,lessFileIncludes,vars){varlessSource=__less[lessFilename]varlessFilenames=includedLessFilenames(lessFilename)$.each(lessFilenames,function(index,filename){varfileInclude=lessFileIncludes[filename]...// Custom variables are added after Bootstrap variables so the custom// ones take precedence.if(('variables.less'===filename)&&vars)lessSource+=generateCustomLess(vars)})lessSource=lessSource.replace(/@import[^\n]*/gi,'')// strip any importsreturnlessSource}

That’s a comment to the fact reads ‘Custom variables are added…’. Aha, the wit thing is your customized code Bootstrap generate is CSS instead of LESS, they use client side LESS.js to compile the source .less code to .css, then you take advantage of compile time to override predefined variables declared in variables.less file.

Conquer the summit of mountain, you flaten out your mind to see other functions, generateCSS read all variables inputs value in customize page,

you’ll also see a variable called lessFileIncludes, which is a map of check to decide if one of .less file will be compile into custom CSS. The variable bsLessSource is the defacto outcome to be polished further by compileLESS function,