DEV Community

Megan
Megan

Posted on

Sass vs Less: Which do you prefer?

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

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:

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:

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 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:

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 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

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

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! 😊

Discussion (4)

Collapse
bhadresharya profile image
Bhadresh Arya

Using Sass in most of the projects as many of the css frameworks like bootstrapnare using sass. Many of the free or paid html templates also come with sass. Other libraries we use also comes with sass.

Collapse
mwong068 profile image
Megan Author

I didn't realize that Sass is so widely used! Thanks for sharing :)

Collapse
stephanie profile image
Stephanie Handsteiner

Vanilla CSS has had variables for a quite a while now.

Aren't supported in Internet Explorer, which means you need to give him a crutch (as always) in form of standard property values.

Collapse
mwong068 profile image
Megan Author

Oh I didn't realize that, thanks for sharing Stephanie!