If you’ve been in the world of web development for at least a few weeks, you’ve probably heard about Sass and/or Less.
That’s because Sass and Less are two of the most common CSS preprocessors in the industry, and are used by many web designers and developers alike.
In this article we’re going to talk about the differences between Sass vs. Less, and more importantly which you should learn as a beginner.
I’m a newb, what’s a preprocessor?
Formally speaking, a preprocessor is a program that takes in one “type of data and converts it to another type of data,” according to Shay Howe.
CSS preprocessers, like Sass and Less, convert into CSS so that web browsers can read the styles.
Some say Sass and Less are like supercharged CSS, because they are extensions of the CSS we know and love. They extend the CSS language by adding features like variables, mixins, functions, and more.
Don’t worry if you don’t understand what these words (mixin, etc.) mean yet.
What is important to understand is that using a CSS preprocessor like Sass or Less makes writing CSS easier, allows you to organize your stylesheets better, and is more maintainable.
The main takeaway: using a CSS preprocessor makes your workflow faster and more efficient. Overall, it makes your life as a designer or developer easier.
Learning a CSS Preprocessor
There are several options when it comes to CSS preprocessors, but the two most common are Sass and Less.
The good news is that once you learn one CSS preprocessor, it is not difficult to switch to another if needed.
Below I’m going to talk about reasons why you should consider each.
Reasons why you should learn Sass
Note: There is Sass (Syntactically Awesome Stylesheets) and then there is Scss (Sassy CSS). In this article, I will be saying Sass, but will be referring to both Sass and Scss.
1. Sass has better language ability.
When comparing Less vs. Sass it’s clear that Sass is more like programming. It has if/the/else statements, for loops, while loops, and each loops.
If you are familiar with writing programming languages, like JavaScript or Ruby, this will be nothing new. Except now you’re able to use them in your stylesheets, thanks to preprocessors.
Less has most of these capabilities, too. They are just not as complex.
Moreover, Sass allows you to do a more variety of math equations. And it has better selector nesting, which can help you keep your stylesheets more in line with DRY principles.
Overall, Sass has more advanced language features and capabilities.
2. Sass has Compass.
Compass is a beloved open-source CSS authoring framework.
Translation: Compass is a framework that goes along with Sass.
And people who use Compass, love Compass.
Even more, lots of big name websites rely on Compass, such as:
The problem? Getting started with Compass is not so easy. (However, there are a lot of awesome tutorials to help you out!)
Aside from Compass, there are other Sass libraries/frameworks. And, yes, there are libraries/frameworks for Less, too. (Check out a list of them all here.)
But none of the Less extensions compare in popularity to Compass.
Learn to Code Websites and Apps →
Reasons why you should learn Less
Less came to the scene after Sass in 2009. Less stands for “Leaner CSS”.
1. Setup (may) be easier
Less uses JavaScript. And you can get going with Less just by downloading less.js, where it will compile the stylesheets in the browser. However, this is not a good approach to take. (Because it will perform AJAX requests to grab the Less files, convert into CSS, and then inject the result back into head of document.)
Obviously, this is inefficient. However, if you’re just playing around and testing out the Less waters — this method will do.
Now, with both Sass and Less most designers/devs will use the command line to compile their files into CSS.
But if the command line terrifies you, fear not. There are a variety of GUI compilers available.
One last thing to keep in mind when setting up either on your machine:
While Less uses JS, Sass uses Ruby. Windows machines do not have Ruby pre-installed. Meaning setting up Sass on a Windows computer may be more difficult. (Again, this is where one of the GUI compilers could be helpful.)
2. Less is like training wheels
Many people say that Less is easier to learn than Sass. Some even say it’s like training wheels.
Moreover, Less’s syntax is more comparable to CSS. Which may be nice for people just starting out, wanting to move from CSS to a preprocessor.
The main differences between Sass and Less
Differences between the two are not massive. Here are a few key ones.
1. Less runs on JS, Sass on Ruby.
As we talked about previously, this could make a difference when setting up your environment.
Again, there are several GUI compilers available where you don’t need to venture into the command line at all.
Meaning this shouldn’t be a factor when determining which to use.
2. Less doesn’t have as many awesome frameworks, like Compass.
As mentioned previously, Less does have some extensions. But nothing like Compass — which people rally behind. In fact, some people use Sass because of Compass.
3. The way you write variables differs.
This is not a huge issue. Both store values in the same way, they just use different symbols.
Sass uses $, whereas Less uses @.
One issue that could arise for some would be confusion while using Less’s @ symbol because in CSS the @ symbol has other meanings—like @media queries and @keyframes. In CSS, the dollar sign has no other value.
In the end, this mostly it comes down to personal preference.
4. In Less, loops only allowed for numeric values.
Again — back to the more complex capabilities with Sass. In Sass you can iterate through any kind of data.
But in Less, you can only loop through numeric values with recursive functions. Being able to loop through any kind of data, like you can with Sass, is much more helpful.
5. Better nesting in Sass
Both Sass and Less allow nesting, but Sass takes it a step further by allowing you to nest individual properties.
Still unsure? Go with Sass.
Unless you are working with something that relies on Less (like a certain frontend framework), go with Sass.
Yes, the learning curve may be steeper at first. However, most agree that Sass is better in the long haul bauce:
- Sass has a better language syntax
- Sass has more features
- Sass has Compass (and other frameworks to choose from)
Basically, Sass is next level.
At the end of the day, using a CSS preprocessor (any preprocessor) is better than using none. It’ll speed up your workflow and make your styles more efficient regardless.
Plus, you can always switch later on. Just start using one.
Which team are you on? #teamsass or #teamless?
