What Are CSS Preprocessors?

CSS preprocessors take code written in the preprocessed language and then it converts that code into the same old CSS. The popular CSS preprocessors are Sass, LESS, and Stylus.

CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to CSS without breaking browser compatibility. In this blog, we will be looking into SASS and LESS

Why Use a CSS Preprocessor?

The main advantage of using this CSS Preprocessor is that, they are not bound by any limitations of CSS. CSS works well but it doesn’t always allow us do everything we would like to do. The preprocessors offer us to use variables in our coding.

Syntax

The most important part of writing code in a CSS preprocessor is understanding the syntax. The syntax is identical to regular CSS for all three preprocessors.

Variables

Variables in Sass and Less can be declared and used throughout the stylesheet. They can be assigned any value, and can be referenced anywhere throughout the stylesheet. Let us look into how to declare variables in Sass. In Sass variables are prepended with ‘$’ symbol and value and name are separated with a semicolon.

For example,

Now for declaration of variables in LESS, they are almost same as Sass variables, except the variables are prepended with a ‘@’ symbol. For example,

Now let us look into difference between Interpolation in Sass and Less

What is Interpolation?

Interpolation: expands on variables in that you aren’t limited to the values of CSS properties.

Interpolation in Sass

$side: bottom;

border-#{$side): 1px solid #000;

The resulting CSS will be

border-bottom: 1px solid #000;

Interpolation in Less

@base-url: “www.acadgild.com”;

background-image: url(“@{base-url}}/images/image.png”);

The resulting CSS will be

background-image: url(“http://www.acadgild.com/images/image.png”);

Operations

We can even perform operations in Sass and Less if we require some proportions over fixed measurements.

Operations in Sass

$div-width: 500px;

$items: 5;

#navbar li {width: $div-width/$items – 10px;} /* — resulting css — */

#div li {width: 150px;}

Similar thing can be done in Less

/* — .less — */

@div-color: #111;

#div1 {color: @div-color * 3;} /* — resulting css — */

#div1 {color: #333;}

Nesting

The most interesting work that can be done in Sass and Less is nesting

Now let us look into an example of nesting list items

Notice how the list, list items, and link are nested within #navbar.

Mixins

By using Mixins we can reuse the code whenever required. Rather than having to go throughout our stylesheet and change a property multiple times, we can now just change it inside our Mixin.

Conclusion:

These are different ways of writing CSS using CSS preprocessor. CSS preprocessor is a way to provide functionality in the form of abstraction like variables, Mixins, and also provide nesting of CSS.

The CSS Preprocessor provide us extra things which cannot be done alone with CSS.

I hope you have understood the main differences between LESS and SASS. Although by the above code example you might have come to know that they are not so difficult when it comes to syntax. I think by now you might have chosen your CSS preprocessor which you would go with. If you have any other query you can write us at support@acadgild.com