Our Experience switching from LESS to SCSS

Introduction

When looking at which preprocessor to use, the choice is often between LESS and SCSS. From our implementation experience both LESS & SCSS libraries share a lot of basics. Both of them are fantastic tools for designers who code, and they can also help developers work more efficiently and quickly. LESS has been such a handy way to work with CSS — especially when paired with CodeKit. But more and more organizations are using modern frameworks with SCSS too. On one of our projects with a default tech stack of LESS, a client requested we instead use SCSS. Based on this, we made the switch. We took our time to ensure that the transition was smooth, and the experience taught some major differences between LESS and SCSS.

Trying out SCSS

While LESS and SCSS offer very similar functionalities, one of our clients preferred to use SCSS, so we thought of switching the codebase from LESS to SCSS and observed few advantages which are given below,

• SCSS has a bigger community to rely on, especially in the context of design systems . That means good examples for inspiration and plenty of people to answer your questions.
• Compile time of SCSS is quicker when compared with LESS.

Making the Switch

There are several packages that you can use to convert LESS to SCSS files. We used the npm less2scss package. However, no software will be smart enough to know if a LESS mixin is also used as a class selector in your HTML markup. Looking at it a bit more deeply, there were actually 2 kinds of LESS files in our code base (and probably in yours, too):

1. Files where mixins and variables were defined
2. Component files where those mixins and variables were applied

The first type requires more attention, but there should be less of that type. We have rewritten the mixins manually since as we already said no software will convert the mixins from LESS to SCSS directly. The second ones were simpler, but we need to do a few changes manually in our case.

How did we implement the SCSS conversion?

To migrate from LESS to SCSS, we have planned our changes into 3 different activities. Following are the steps,

1. Automated changes
2. Configuration changes
3. Manual changes

a. Automated changes

Since the files to be changed to SCSS are many, we have used the npm less2scss to convert all our LESS files to SCSS. Given below are commands for this activity.

• Install less2scss plugin globally using the following command

npm install less2scss –global

• Npm command to run less2scss
• less2scss -s ./less_folder -d ./scss_folder -r -e ‘node_modules,vendor’

-s — source path

-d — destination path

-r — recursively walk directories

-e — exclude paths

Ensure to give the exact path and run this command which will create a copy of SCSS files in the corresponding folder. As part of the code being converted from LESS to SCSS, the variables syntax will be updated as well (i.e. @ to $).

b.Configuration Changes

Now we have all our SCSS files in all the folders where LESS files were there previously. Before starting our manual changes we need to change our webpack configuration from LESS to SCSS to compile the LESS files.

Step 1) In webpack.common.js replace less loader with SCSS loader in the configuration.

Step 2) Under webpack, resolve instead of LESS, SCSS has to be added in the extensions.

Step 3) Repeated the second step (in our case) in brand specific webpack configuration as well.

Step 4) Added SCSS and SCSS loader in package.json.

Step 5) Now this is time to change the ‘includes’ from LESS to SCSS. So wherever we have the .less include need to replace it with .SCSS.

Before: LESS

After: SCSS

c.Manual Changes

After completing the automated and manual changes we tried to build our code to check if the SCSS files would compile or not. If we make the above configurations also, still compiling the SCSS files will throw errors because we need to do a few more manual changes. As part of our project, we have listed down the challenges which we faced.

c1.Fixing the Mixins

Mixins need to be rewritten manually and again no software will be smart enough to know if a LESS mixin is also used as a class selector in your HTML markup.

LESS

SCSS

c2.Override variables in SCSS

For each customer, we’ll create a file with their custom variables. It will use the same variable names, but replace the values. Normally to override variables, you have to define the new value below the original value.

With !default, it’s the other way around: we include the brand specific SCSS file first, then we add !default at the end of all our default brand values. This is what our variables look like now:

Files included for client-name-1’s account:

c3.Replacing includes with extends

In LESS if you want to include the styles from another class you will be including the class name along with parenthesis. But in SCSS, we use the @extend keyword to achieve the same.

LESS

SCSS

c4.Import with LESS and SCSS

Import reference in LESS file needs to be replaced with use file path in SCSS.

LESS

SCSS

c5.SCSS:math

LESS has a lot of inbuilt functions such as Math functions (round, percentage, min, max etc..), and List functions (length, extract). If your code base has used any of the inbuilt functions in LESS, those should be reviewed after running less2scss as not all those functions will be mapped to scss equivalents automatically.

LESS

SCSS

Conclusion

What does it all take to successfully switch from LESS to SCSS?

From our experience these two libraries support a lot of similar features which give more flexibility to developers for implementing things efficiently and quickly. The end to end switching involves manual, automated & configurational changes. For any migration or software switching, ensure we have the right mix of things like,

• Good Planning
• An Experienced Team who is hands-on with relevant tools and technologies

This ensures successful switches across technologies.