What All You Need to Know About Sass and LESS Preprocessors

If you've been working with CSS, then you most likely will be familiar with CSS preprocessors. A preprocessor proves a worthy tool when you're dealing with huge stylesheets having different styles and codes, as it helps in reducing the amount of CSS you need to write. Also, preprocessors help make CSS more beautiful and extend the basic functionalities of the traditional Cascading Style Sheets with the help of features like mixins, variables and a few others.

What's more? CSS Preprocessors automatically compile all the updates into your newly created CSS files. And thus, save you from having to touch .css file again. There are several CSS Preprocessors available online, however, in this post I'll be discussing about two of the most popular preprocessors SASS and LESS.

Sass and LESS: An Overview

Both Sass and LESS CSS Preprocessors are backwards compatible. This means that you can convert your current CSS files into a Sass or LESS, simply by renaming the ".css" file extension to either ".less" or ".scss", respectively.

Let's take an example of using the variable name in your CSS, to see how Sass and LESS works.

Are you working on a project that contain multiple colors? What can you remember easily, darkbrown or #824200? Well, it is hard to remember color code. But by using variables, you can assign the value of color codes to a name and can use the name of the variable in your CSS wherever you want to use some specific color.

Sass uses "$" symbol for defining a variable as you can see in the following code:

$darkbrown: #824200;

$border-color: #000000; //black
$base-font-size: 14px;


    body {

        font-size: @base-font-size;

    }

    header {

      border-bottom: 1px solid @border-color;

    }

    a {

      color: @darkbrown;

    }

Unlike Sass, the LESS preprocessor use “@” symbol for defining a variable:

@darkbrown: #824200;

@border-color: #000000; //black
@base-font-size: 14px;

    

    body {

        font-size: @base-font-size;

    }

    header {

      border-bottom: 1px solid @border-color;

    }

    a {

      color: @darkbrown;

    }

When both Sass and LESS code is compiled, it will generate following output:

body {

        font-size: 14px;

    }

    header {

      border-bottom: 1px solid #000000;

    }

    a {

      color: #824200;

    }

So, simply updating the value of the darkbrown variable will update the value wherever that variable was used.

Sass or LESS: Which One Is Better?

1. Using Extensions For Faster and Easier Development

Both Sass and LESS come loaded with extensions that help in carrying out development in a quick and easy manner.

Sass makes use of Compass extension for performing development. The extension contains several Mixins that help in writing CSS3 syntax in less time. In addition, it comes with great features like Typography, Sprite images, etc., and help control the CSS output. In essence, the Compass extension serves as all-in-one package that makes web development a breeze.

LESS also offer plenty of extensions, but unlike the Compass extension, you can find an extension that can help address various needs. Simply put, you will have to make use of different extensions for your web development project. While this may not seem an issue to experienced users, but novices will require some time to select the right extensions that best serve their needs.

2. Receiving Error Notifications

When working on any web development project with a thousand lines of code, even a small error can create chaos. But, receiving an error notification can help you deal with problems quickly.

Sass produces an error notification as soon as it discover invalidity in the code. Take a look at the example below:

/* this is your Sass style.scss file */

#navbar {

  width: 60%;

  height: 21px;

}

When using Sass, you'll get an error notification that looks something like:

error sass/test.sass (Line 3: Invalid CSS after "60%":

expected expression (e.g. 1px, bold), was ";")

Note: The error is caused since the '.sass' file extension is used instead of '.sass' file extension.

Any beginner will most likely be confused after seeing the above error notification. Moreover, it is saying error is on line 3, instead of 1.

In contrary, LESS help present error notification in a more clear and accurate manner. Let us take an example:

Syntax Error on line 5

in style.less on line 5, column 2:

4 color: saturate (@base, 5%);

5 border-color: lighten(@base, 15%)

6 border: 1px solid transparent;

Now, looking at the above screenshot, you'll certainly understand the error you have made when working on a CSS file with LESS.

3. Documentation

Sass has an extensive documentation, but lacks good look and feel. No doubt, it is important that the documentation should be comprehensive, however, presentation plays a crucial role in motivating the readers. But, in case of LESS documentation is a lot more clear and easy to understand.

Unlike Sass documentation that contain too many text explanations, the LESS documentation includes examples to help present text in an interactive manner, but is not as comprehensive as Sass documentation.

4. Basic Operations

Sass as well as LESS preprocessors can carry out basic math operations. But, they both return different results. Using Sass/Scss for performing basic math operations:

$margin: 12px;

div {

    margin: $margin - 12%; /* Syntax error: Incompatible units: '%' and 'px' */

}

LESS for performing basic math operations:

@margin: 12px;

 
div {

    margin: @margin - 12%; /* = 0px */

}

As you can see, Sass code is more accurate compared to LESS code that helps perform basic math operations.

Let's Wrap Up!

Both Sass and LESS are two of the most popular and widely used CSS Preprocessors. In fact, they prove useful tools that help make web development tasks more efficient and quick. However, when it comes to choosing any one of these two options, Sass stands as a winner. But this doesn't mean LESS is bad. Rather, it just needs to be somewhat better than the Sass preprocessor.

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments