Sass vs. Less: Which CSS Preprocessor to Choose in 2019?

Spread the love

Sass vs. Less: Which CSS Preprocessor to Choose in 2019?

 

Today’s web development process is vastly different from how web projects were developed just 10 years ago: gone are the “vanilla” days of using simple tools to build simple websites; nowadays, being proficient in web development technologies (like HTML, CSS, and JavaScript) is indistinguishable from mastering additional tools like frameworks, libraries, package managers, and more — a good example would be knowing the best Bootstrap editor tools.

One of these tools is a CSS preprocessor — a scripting superset of CSS that makes writing CSS code easier. At the moment, the battle for the title of the best preprocessor is Sass vs. Less, or, as their name suggests, Syntactically Awesome Style Sheets versus Leaner Style Sheets. Although these tools are similar, different web developers go for different options — and in this article, we’ll explore if Sass or Less is the best fit for you.

Why are CSS preprocessors so vital?

Even though CSS is an incredibly powerful technology (a good showcase of its prowess is the “CSS can do that?” question), it lacks the logic that “real” programming languages have. CSS preprocessors address this issue via extending CSS syntax’s functionality and adding a plethora of useful features like variables and mixins. So what are the advantages of using either Sass or Less?

  • Cleaner code thanks to variables and nesting.
  • Easier maintenance thanks to specialized libraries.
  • Programming language logic.
  • Better organization.
  • Easier setup.

Essentially, all of these advantages were designed for one purpose: save the developer’s time. However, the question still stands: which CSS preprocessor, Sass or Less, would be better at this task?..

Comparing by popularity

Although popularity per se is far from a reliable criterion, it’s always interesting to see how widely these tools are used. In general, Sass is more popular — but as our practical section below will show, it doesn’t mean that Less is inherently worse.

Sass vs. Less: Which CSS Preprocessor to Choose in 2019?

We start with Google Trends which is a great tool to gauge the overall popularity of a given term. Still, it cannot assess its popularity among professionals — as the tool’s name suggests, it monitors trends. Well, maybe we should take a closer look at pro-oriented platforms…

Sass vs. Less: Which CSS Preprocessor to Choose in 2019?

GitHub shows interesting statistics: Sass’ popularity is countered by Less’ bigger “Stars” and “Forks” numbers, showing that developers appreciate Less as well.

Sass vs. Less: Which CSS Preprocessor to Choose in 2019?

Another perspective can be seen in the developer surveys conducted by Dagstuhl Research Online Publication Server, SitePoint, and Ashley Nolan: this statistic shows just how popular Sass is in the dev community.

Comparing by features

Most of the time, the popularity of the given tool/solution stems from the awesome features it can offer. Let’s compare Sass and Less by features! Here’s what Sass can and Less can’t do:

  • Indented syntax: omitting curly braces { } and semicolons ;.
  • Using default variables (these are overwritten by regular variables)
  • Nesting selectors (with a parent reference under another selector)
  • if-statements (in Less’ case, this is considered as unusual syntax)
  • Using ternary operators, e.g. a < 5 ? true: false.
  • Interpolating if-statements inside property names and selectors.
  • Customization of the global precision for calculations involving decimal numbers.

And here’s what Less can do what Sass can’t:

  • Hoisting variables, i.e. declaring variables after using them.
  • Extracting luma/luminosity/luminance components from a color.
  • Extracting hue, saturation, or value/brightness components from a color.

OK, so Sass and Less actually have a number of differences. How are the most important features (variables, nesting, mixins, etc.) realized in these tools?

Variables

Sass vs. Less: Which CSS Preprocessor to Choose in 2019?

Variables are a staple of any programming language, allowing the developer to add a layer of abstraction to the development process. CSS doesn’t have this feature — but CSS preprocessors do!

Sass font setup:

CSS output:

Less color setup:

CSS output:

Nesting

Sass vs. Less: Which CSS Preprocessor to Choose in 2019?

Similar to variables, nesting simplifies CSS code via organizing the elements in a clear way — just like HTML elements are organized in a hierarchy.

Nesting in Sass:

CSS output:

Nesting in Less:

CSS output:

Importing

Sass vs. Less: Which CSS Preprocessor to Choose in 2019?

Although CSS supports the @import feature by default, it leads to an increase in HTTP requests — both Sass and Less solve this problem by combining the to-be-imported files together.

Importing in Sass:

CSS output:

Importing in Less:

Conclusion

CSS preprocessors are essential tools of any remote web developer. Curiously enough, it’s hard to say whether Sass or Less reigns supreme in this field — they are both great and have their own unique specializations. Still, if you think that preprocessor A is better than preprocessor B, the comment section awaits your input. 🙂

2 thoughts on “Sass vs. Less: Which CSS Preprocessor to Choose in 2019?

  1. I’ve been browsing online more than 4 hours today,
    yet I never found any interesting article like yours. It’s pretty worth enough for me.
    In my view, if all website owners and bloggers made good content as you did, the net
    will be much more useful than ever before. I needed to
    thank you for this good read!! I certainly enjoyed every little bit of it.
    I have got you book-marked to look at new things you I like it when individuals get together and share ideas.
    Great blog, stick with it! http://hats.com

  2. Ahaa, its pleasant discussion concerning this article at this place at this weblog, I
    have read all that, so at this time me also commenting at this place.
    Howdy! This article couldn’t be written much better!
    Looking at this post reminds me of my previous roommate!
    He continually kept preaching about this. I am going to
    forward this post to him. Pretty sure he’ll have a good read.
    Thank you for sharing! It is the best time to make
    some plans for the future and it’s time to be happy.
    I have read this post and if I could I desire to suggest
    you few interesting things or tips. Perhaps you could write
    next articles referring to this article. I desire to read even more things
    about it! http://foxnews.net/

Leave a Reply

Your email address will not be published. Required fields are marked *