Less vs. Sass - Which CSS Preprocessor is Best For You?

Udemy Editor

In the past, a lot of web developers were reluctant to look into CSS preprocessors, for fear of their complexity, added burden in the development process, or the possibility that they’re trying to offer a solution to an issue that they don’t believe exists. People are beginning to realize the benefits of using a CSS preprocessor, but the decision to finally try one out is made even more difficult when faced with a few different options.

Less (Leaner CSS) and Sass (Syntactically Awesome Stylesheets) are commonly used CSS preprocessors, each with their own advantages and disadvantages. In this article, we’ll cover the reasons why you should be using a preprocessor in the first place, plus some of the pros and cons of the two major stylesheet languages available.

If you’ve already made up your mind and just need a place to get started, you could try out this Easy CSS with Sass course, or this Writing CSS with Less course.

Why Use CSS Preprocessors?

CSS is used to style the look of a webpage, based on the content you created in its HTML document. It’s a very simplistic language, one that identifies the HTML elements you want, and changes them accordingly. It’s a great, accessible, and kind of essential language for people looking to get into web design, beginners especially. It’s also very limiting.

With the use of preprocessors, web developers can have access to a range of features that CSS would have if it weren’t such a simple language: functions, variables, mixins, and more. It also saves a significant amount of time by allowing you to reuse pre-defined properties, rather than writing them over and over again.

Consider the difference between this:

WITHOUT A PREPROCESSOR
.header-large {
   font-family:Tahoma;
   font-weight:bold;
   font-size:48px;
   font-variant:small-caps;
   text-decoration:underline;
   color:#ff0000;
}
.header-medium {
   font-family:Tahoma;
   font-weight:bold;
   font-size:36px;
   font-variant:small-caps;
   text-decoration:underline;
   color:#ff000;
}
.header-small {
   font-family:Tahoma;
   font-weight:bold;
   font-size:18px;
   font-variant:small-caps;
   text-decoration:underline;
   color:#ff000;
}

… and this:

WITH A PREPROCESSOR
.header-large {
   font-family:Tahoma;
   font-weight:bold;
   font-size:48px;
   font-variant:small-caps;
   text-decoration:underline;
   color:#ff0000;
}
.header-medium {
   .large-heading;
   font-size:36px;
}
.header-small {
   .large-heading;
   font-size:18px;
}

Some CSS preprocessors even allow for nesting, a concept that exists in programming, but not pure CSS. This will keep your code a lot more organized. We all know how cluttered those stylesheets can get!

Compare the difference between this:

WITHOUT A PREPROCESSOR
h1 {
    font-family:Tahoma;
    font-size:36px;
    font-weight:bold;
    font-variant:small-caps;
}
h1 a {color:red;}
h1 a:hover {text-decoration:line-through;}

… and this:

WITH A PREPROCESSOR
h1 {
    font-family:Tahoma;
    font-size:36px;
    font-weight:bold;
    font-variant:small-caps;
    a {
        color:red;
        &:hover {text-decoration:line-through;}
    }
}

That’s about the gist of it. CSS preprocessors offer:

The use of functions, variables, and mixins.
Cleaner, organized code.
No wasted time!

But which one should you use?

Less vs. Sass – Similarities & Differences

There’s no right or wrong answer if you’re choosing between Less and Sass. Each stylesheet language is good in the right circumstances, and in fact have a lot of things in common, such as:

Nesting capabilities.
Mixins and parametric mixins.
Namespaces.
Color functions.
JavaScript evaluations.

One of the primary differences between the two is that Sass is coded in Ruby, and is thus processed server-side, while Less is a JavaScript library and processed client-side. There are some minor differences with the way both languages handle the features listed above as well.

Variables

Variables can be used to easily use pre-assigned values anywhere in your stylesheet, for quick access to values like colors, which can be a hassle to track.

In Less, variable names are prefaced with the @ symbol. In Sass, variable names are prefaced with the $ symbol. In both, the value is closed with a semicolon, as is typical for CSS.

Example:

@mainLessColor: #ff0087;
p {color: @mainLessColor;}
__________________________
$mainSassColor: #ff0087;
p {color: $mainSassColor;}

Super similar, right? The only possible issue here is with Less. Because the @ symbol has meaning in CSS – whereas the $ does not – there’s room for confusion for beginners who are not used to the standards of the language yet.

Inheritance

There’s a way to do inheritance in pure CSS, by listing selectors, separated by commas, and then defining their shared properties within curly braces. This method is fine until you need to start defining individual elements, which can result in cluttered stylesheets that run much longer than necessary.

Inheritance allows selectors to inherit the properties of other selectors.

While Sass supports this, Less does not. In Sass, you can define multiple selectors with one set of properties. If you try to do this in Less, it will result in repeated properties once compiled into CSS. This can result in some issues involving priority.

Sass expands on the concept of inheritance with selector inheritance, which groups selectors with identical values.

Loops and Logic

Less features a “guarded mixin” capability, which are mixins (or classes that contain numerous methods from other classes) that are implemented when a certain condition is met. This is useful for changing the background color based on your page’s text color, an example which this Sass vs. Less guide demonstrates in more depth.

As the guide goes on to explain, though, the looping capabilities of Sass are far superior, with built-in while and for loops, and if-then-else statements.

Math

While it’s a minor difference, it’s worth noting that Sass allows you to work with “unknown” units, whereas Less does not. This makes Sass slightly more adaptable in case a new unit is introduced.

The two languages also handle certain errors differently, with Sass returning a syntax error for incompatible units, and Less not.

Errors

Depite Sass trumpeting (depending on your tastes) with the math-related syntax error, Less does have more detailed and presentable error notifications overall than Sass. See an example in this post comparing the two preprocessors.

Conclusion

Which preprocessor you decide to go with – Less or Sass – depends on personal preference. If the differences listed above are more major or minor than others, go with what you think seems best. Better yet, try them both out: download Less here and download Sass here.

Once you’ve gotten them setup, try out a few Udemy tutorials, such as this one on learning Sass step-by-step or a general CSS course.