Sass vs Less: Which do you prefer?
Tags: css
Published: 2020-07-30 20:10:27

So I guess I'm sort of obsessed with these poll-like opinion based posts lately, but I love hearing what the Dev community's take is on so many subjects! This week I wanted to talk about CSS - a "language" that I love completely and have such deep hatred for all at the same time.

![I love you and I hate you gif](https://media.giphy.com/media/mWO9gCz9v4Ak3cJJMO/giphy.gif)

This isn't a new debate, that's for sure, but I've mostly used vanilla CSS my whole life and was very interested in this preprocessor debate.

If you're new to CSS or the idea of preprocessors here are the formal web definitions of each:

###CSS
[MDN:](https://developer.mozilla.org/en-US/docs/Web/CSS)
> Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

###Sass
 [Wikipedia:](https://en.wikipedia.org/wiki/Sass_(stylesheet_language))
> Sass (short for syntactically awesome style sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself. 

[Sass](https://sass-lang.com/) documentation:
> Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

###Less
 [Wikipedia:](https://en.wikipedia.org/wiki/Less_(stylesheet_language)) 
> Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles. 

[Less](http://lesscss.org/) documentation:
> Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly.

![Makes sense gif](https://media.giphy.com/media/ewCxZp2RmuCDaMl4pq/giphy.gif)

Now that you have some context, here is my usual data table with comparisons. I scoured the internet for other people's opinions and have compiled them below:

  | Regular ol' CSS  | Sass | Less |
|---|---|---|---|---|
|  Setup  |  Ready out of the box styling | Setup required to ensure that code compiles before rendering  | Setup required to ensure that code compiles before rendering |
|  Use of Compiler | Not necessary  | Needs compiler  | Needs compiler |
|  Use of Variables | Not capable | Can use variables  | Can use variables  |
|  Documentation | Standard documentation with LOTS of information online  | More frequently updated repo with less issues and PRs than Less | More issues and PRs than Sass repo |
| Integration | Great for smaller projects, becomes excessive in larger projects | Helpful for larger projects for cleaner, dryer code | Helpful for larger projects for cleaner, dryer code  |

It's also good to keep in mind that CSS is always updating as well, and there have been some great new features added recently. Some that can even rival some of the benefits that could only be gained before by using a preprocessor.

![Do you love it or do you love it gif](https://media.giphy.com/media/LSQmDO4Uu4cDuKkWJ0/giphy.gif)

But what do you think? If you've used either of these in the past, which do you think is better? And if not are you interested in either of them or preprocessors at all? Or is CSS on it's on plenty enough to deal with as it is?

Excited to hear all of your opinions and hope you all have a great rest of your week! 😊