Convert Bootstrap SASS to LESS automatically, with Visual Studio Code & Node.js

Since Bootstrap v.4 release, front-end developers who prefer LESS, have lost the possibility to reference its source files in their styles, due to the Bootstrap migration to SASS.

I will not delve into the reasons behind the switch but you can get an idea from these answers and this post about SASS vs LESS.

However, thanks to Node.js, you can convert SASS files easily into LESS ones, and be able to reference them just like before!

In this tutorial I will show you how to accomplish this while automating the process, so you can easily re-use it in your Bootstrap-based projects.
This guide is meant for beginners and users new to Node.js, so I will try to keep things as simple and plain as possible.

First of all, we need Visual Studio Code and Node.js, so go ahead and install both if you don’t have them yet.

Now download the Bootstrap source zip, extract the scss folder and paste it in your project (eg. inside assets/styles/bootstrap).

There are of course other ways to include the Bootstrap source files in your project, as well as other libraries (like FontAwesome), but this guide is not about them.

In order to begin, we need to start VS (Visual Studio Code), add our project’s folder to the workspace and create a package.json file, which will tell npm (Node.js Package Manager) what to do with our project.

Make sure the terminal is open (if not, go to View and show it – keyboard shortcuts depends on your keyboard lang, so I won’t mention it) and that it’s ready for input (you will see that you should be in your project’s folder).

Type npm init.
This will start a guided process with questions, assisting you in the creation of the package.json file.

Once that is done and the file is now in your project’s root, we can start with the SASS to LESS conversion stuff.

We will need some Node’s packages in order to perform certain actions (same concept as libraries like jQuery for Javascript, or PHP libraries, whatever makes most sense to you).

One of them is gulp, which is best you save as a global package (re-usable in any project, not just this one).
So let’s go ahead and type in the terminal npm install gulp --save-g
We just told npm to go ahead and retrieve the latest gulp package version, install it and save it as a global (and package) dependency in our package.json.
We need another package now, that runs on top of gulp: gulp-run-command.
Let’s type npm install gulp-run-command --save-dev
This time, after installing the package, this dependency will be added only to this specific project.

In case you are wondering: the reason why you shouldn’t add all/any packages globally, is that each package might require other packages (npm checks that for you and downloads them automatically) and you might soon end up with GB of packages in your hdd that you only used once for some project.

Before going right into the conversion process, we need a couple more packages.
Type npm install less-plugin-sass2less less-plugin-functions --save-g
These are the set of functions that will do the actual conversion.

What we need now is to create a gulpfile.js, which is essentially the gulp package configuration file.

Now, all we need to tell our gulpfile, is to include gulp itself and the other package for it, that we just installed, or it won’t understand the commands we put in the file.

In order to do so, just add at the top of the file:

var gulp = require('gulp');
var run = require('gulp-run-command').default;

Now we are ready to add a task (which, after all, what gulp is for).

Keep adding this to the file:

// Convert SASS to LESS
gulp.task('conv1', run("sass2less assets/styles/bootstrap/scss/_variables.scss 'assets/styles/bootstrap/less/_variables.less'"))
gulp.task('conv2', ['conv1'],  run("sass2less assets/styles/bootstrap/scss/_grid.scss 'assets/styles/bootstrap/less/_grid.less'"))
gulp.task('conv3',  ['conv2'], run("sass2less assets/styles/bootstrap/scss/mixins/_grid-framework.scss 'assets/styles/bootstrap/less/mixins/_grid-framework.less'"))
gulp.task('convertSASStoLESS',  ['conv3'], run("sass2less assets/styles/bootstrap/scss/mixins/_grid.scss 'assets/styles/bootstrap/less/mixins/_grid.less'"))

In essence, we are converting the SASS Bootstrap source files, into LESS files and saving them somewhere else (assets/styles/bootstrap/less).
You are free of course to change which files are being converted and where, this is only an example which will make Bootstrap variables, as well as the grid builder, available for reference in your styles, in LESS.

You may notice that the last task has a different name convertSASStoLESS, compared to the other ones, but that’s only because it’s an easier name to remember later, when we will instruct our package.json to execute this particular task, which in turn will callback its previous one and so on.

Save your gulpfile.js and let’s wrap things up!
The last step will allow you to automate the conversion process, as well as installing the necessary packages in seconds, without having to go through the whole set up, each time.

In your package.json file, add right before the Dependencies:

"scripts": {
    "convertSASStoLESS": "gulp convertSASStoLESS"

Save the file and type in the terminal:
npm run-script convertSASStoLESS

The terminal will log the results and you will see your newly converted files in your project!

Next time, all you will have to do is:
– make a new project folder
– have the Bootstrap source files in it
– add in the gulpfile.js you just made
– type npm init to create the package.json (this time it will detect the necessary packages on its own)
– add in the package.json the scripts instruction
– run npm install in the terminal (this will install all dependencies – the required packages) AND run our gulp tasks!

There is currently an issue with the conversion of certain parts of the Bootstrap files, using the sass2less package, since SASS allows for functions that LESS doesn’t have. In case you see errors, after importing the newly converted LESS files in your styles, check the status of the issue. While the issue is being fixed, you can use this npm package instead: bootstrap-less-port

You could even use gulp to mix & merge SASS, LESS and CSS files if you wanted to (in this case, not for reference, just in case you like to code in both SASS and LESS and only need a combined CSS in the end).

Another way to do this, without having to setup the package.json nor the gulpfile.js, would be to simply install the Easy Compile VSCode extension, which integrates the sass2less package (the one we used in the tutorial) directly.
That way, you can reference an scss file, right into your less, without even having to convert it.
However, since the sass2less package, currently cannot convert certain SASS functions (because they do not exist or have a real alternative in LESS), you might want to stick to the bootstrap-less-port package, for now.

Happy coding!

Jany Martelli

I’m a Digital Consultant, Front-End Developer, specialized in WordPress.
I help companies, professionals and startups grow with technology and a winning digital strategy, I hand-pick and coordinate the perfect team for them, plan projects from the ground-up, develop & deploy websites, online stores and apps.

Privacy Preference Center


Also called a transient cookie, a cookie that is erased when the user closes the Web browser. The session cookie is stored in temporary memory and is not retained after the browser is closed. Session cookies do not collect information from the user s computer.

They are usually used to temporarily keep track of users' preferences (eg. currency, language, items you place in the cart - in case of an e-commerce website, which this website is not) throughout the website. Other times they are used to make sure the user is not a malicious bot trying to take down a website, hence the cookie cannot be disabled for security reasons.

They are usually harmless (or they should be!) and will go away when you leave the website or close the browser.



Persistent Cookies.

Also called a permanent cookie, or a stored cookie, a cookie that is stored on a user's hard drive, until it expires (persistent cookies are set with expiration dates) or until the user deletes the cookie.

These cookies are meant to profile the website's visitors and let the admins know who visits their website. Your name is NOT tracked, but your IP, country, browser and device specs, research terms and more, usually is. It helps admins understand what contents their users like best and who is their audience, in order to provide better and more targeted content.

Other cookies have the same functions as session ones: for example, they simply help the browser remember if your Internet connection is fast enough to play high-quality videos next time, or what language you chose for your subtitles.

Some of these might be relatively harmelss, since they were meant to first and foremost help admins to manage their site's audience and content, however they might also be used, to be collected and sold to third parties.

You can check a full explanation of a few of the most common ones here



Persistent Cookies.

Also called a permanent cookie, or a stored cookie, a cookie that is stored on a user's hard drive, until it expires (persistent cookies are set with expiration dates) or until the user deletes the cookie.

These cookies are meant to collect your browsing preferences (your searches, the websites you visit, things you like or don't like, personal conditions and things you might not want a third party to know about nor to be sold to someone else).

A vast majority of websites, search engines, apps and social networks, will place these cookies in your browsers because they are showing you ads and making money off them. This is not inherently bad, however the ad you see, comes also with these cookies, to help Advertising Networks to show you even more relevant ads, as well as collect a vast amount of data about Internet users, to then be sold or mishandled in ways that could harm society.

This website shows Ads from Google, therefore it places their cookies in your browser (sorry!).
If you don't wish to be tracked, please adjust your privacy settings here.
We also show Facebook Ads, therefore if you don't wish to be tracked by them, please head over here to change your settings.

Also turn these cookies' consent toggle OFF.

Please understand that not allowing Advertising cookies to be placed in your browser, does NOT mean you will not see ads, you STILL will, but they simply will not be relevant to your own interests anymore.

On Chrome, click here, to block all third party cookies (they might all be used for advertising or collect your preference to be sold to the highest bidder, though, but most likely they will be).

If you want to have even more control over which third parties can collect your data (even outside this website), please visit this website.