Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Less or Sass – Which to choose?

Wednesday, March 2nd, 2016 by Servage

sass-less-cssCSS preprocessors have become popular tools to ease and speed up the work of web designers. When looking at the latest web development trends, CSS preprocessors have gained enormous popularity in the past years, and the ability to use one is surely a benefit for developers and designers alike seeking a job. If you are not familiar with pre-processors such as Sass or Less, you may be wondering which one to start using. This article covers the differences and current popularity of Sass and Less to help you get started.

What are Less and Sass?

Before making a decision between which preprocessor to use, it is crucial to answer one question: what is a CSS preprocessor? A preprocessor is a program that converts specially-formatted CSS stylesheets into normal, so-called vanilla CSS. The benefit of using preprocessors is that they add features that don’t exist in vanilla CSS, such as functions (called mixins), variables and nesting (writing CSS in hierarchies just like in HTML). Features like these help developers save time by writing more reusable code and organizing their stylesheets better.

Less vs. Sass

Due to the increase in the popularity of Less and Sass, one question keeps popping up regularly: “Should I use Less or Sass?” While both of these two preprocessors share similarities, there are some key differences between them. One of the most significant differences is their syntax. Less has a syntax that closely resembles vanilla CSS. However, Sass has two different syntaxes, which is great because developers can freely choose between them without having to learn a whole new preprocessor.

Less and Sass both support basic logic statements such as if-statements and looping through data. With Sass you can also create your own functions. Functions can be used to perform calculations and return values like in any programming language.

Some minor differences also exist. Sass uses $ for its variables while Less uses @. This may not seem like a big deal, but the use of the @ symbol is already reserved in vanilla CSS for thing such as media queries and keyframes (@media and @keyframes). Using $ for variables can prevent some confusion and is considered more consistent coding practice by some developers.

While Less and Sass are both similar in their features, Sass seems to be the choice of most developers and it is gaining more and more popularity. However, don’t be afraid to choose the path of Less if you are more intrigued by the syntax and features it offers. If you decide to master one preprocessor, it is easy to change to a new one afterwards. To answer the question which you should be using, use tools that help you in your development workflow and don’t get too distracted by what others use. Perhaps you want to jump into Sass right away, or try both. If you don’t see the need for a preprocessor at all, staying with vanilla CSS is not a bad choice either.

Less or Sass - Which to choose?, 4.4 out of 5 based on 5 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.