☄ EXPOLORE MIND ⚜ Tutorial ? JIQA Biography News
PRV MENU NEXT

Comparing CSS Preprocessors : SASS and LESS

Course- CSS3 >

Sass and LESS both are CSS Preprocessors. These are two of the most commonly used processors in the industry. CSS processors are very powerful and help you to streamline the development process. Although, both of these share many similarities in syntax, the main difference between them is the way they are processed. LESS is a Javascript library and it is processed at the client side. Whereas Sass runs on Ruby and it is processed at the client side.

Let us try to understand some of the difference between Sass and LESS:

Getting Started:

Let us start from the very first step and that is installation. LESS and Sass both are built upon different platforms . As we have already read above that Sass runs on Ruby while LESS is a Javascript library.

Getting started with Sass:

Sass requires Ruby to work. Ruby is pre-installed in Mac but in the case of Windows you have to first install Ruby before you start working with Sass. Moreover, you have to install Sass through the terminal or the Command Prompt.

Getting Started with LESS:

Less is easy to install as it is build upon Javascript. It is as easy as linking the JavaScript library to your HTML document. There are some well performing GUI applications to help in compiling LESS to CSS and most of them are free which makes it even better.

1.Nesting:

Sass and LESS both allows Nesting. Sass allows you to nest individual properties which take nesting to a new level.

With Sass

01 nav {
02   ul {
03     margin: 0;
04     padding: 0;
05     list-style: none;
06   }
07   li {
08     display: inline-block;
09   }
10   a {
11     display: block;
12     padding: 6px 12px;
13     text-decoration: none;
14   }
15 }

CSS Output

01 nav ul {
02   margin: 0;
03   padding: 0;
04   list-style: none;
05 }
06 nav li {
07   display: inline-block;
08 }
09 nav a {
10   display: block;
11   padding: 6px 12px;
12   text-decoration: none;
13 }

With LESS

1 #header {
2   color: black;
3   .navigation {
4     font-size: 12px;
5   }
6   .logo {
7     width: 300px;
8   }
9 }

CSS Output

1 #header {
2   color: black;
3 }
4 #header .navigation {
5   font-size: 12px;
6 }
7 #header .logo {
8   width: 300px;
9 }

2. Mixins:

Mixins are defined a bit differently in Sass and LESS. We use a @mixin directive in Sass, While it is defined as a class selector in LESS. For Example:

Sass:

1 @mixin border-radius ($values) {
2   border-radius: $values;
3 }
4 nav {
5   margin: 50px auto 0;
6   width: 788px;
7   height: 45px;
8   @include border-radius(10px);
9 }

Less:

1 .border(@radius) {
2   border-radius: @radius;
3 }
4 nav {
5   margin: 50px auto 0;
6   width: 788px;
7   height: 45px;
8   .border(10px);
9 }

Mixins are used to include properties from one ruleset to another ruleset. This method goes further with Selector Inheritance in Sass. The concept is same, but Sass extends or groups selectors that have the same properties and values using the @extend directive instead of copying the whole properties.

For example:

1 .circle {
2   border: 1px solid #ccc;
3   border-radius: 50px;
4   overflow: hidden;
5 }
6 .avatar {
7   @extend .circle;
8 }

It will result in:

1 .circle, .avatar {
2   border: 1px solid #ccc;
3   border-radius: 50px;
4   overflow: hidden;
5 }

It shows that Sass is one step ahead by distinct Mixins and Selectors Inheritance.

3.Conditional Statements:

This is something which is not present in LESS. Sass enables you to use if {} else {} conditional statements and for {} loops as well. It also supports the operators like or, and ,not and <,>,<=,>= , == .

01 /* Sample Sass "if" statement */
02 @if lightness($color) >; 30% {
03   background-color: #000;
04 } @else {
05   background-color: #fff;
06 }
07  
08 /* Sample Sass "for" loop */
09 @for $i from 1px to 10px {
10  .border-#{i} {
11     border: $i solid blue;
12   }
13 }

4. Loops:

Less allows you to loop only the numeric values. Whereas Sass empowers you to iterate through any kind of data.

For Example:-

LESS

01 .looper (@i) when (@i > 0) {
02   .image-class-@{i} {
03     background: url("../img/@{i}.png") no-repeat;
04   }
05  
06   .looper(@i – 1);
07 }
08  
09 .looper(0);
10  
11 .looper(3);
12 //--------------- Outputs: --------------------
13 //.image-class-3 {
14 // background: url("../img/3.png") no-repeat;
15 //}
16 //.image-class-2 {
17 // background: url("../img/2.png") no-repeat;
18 //}
19 //.image-class-1 {
20 // background: url("../img/1.png") no-repeat;
21 //}

SASS

01 @each $beer in stout, pilsner, lager {
02   .#{$beer}-background {
03     background: url("../img/beers/#{$beer}.png") no-repeat;
04   }
05 }
06 // ------------------- Outputs: ---------------------
07 //.stout-background {
08 // background: url("../img/beers/stout.png") no-repeat;
09 //}
10 //.pilsner-background {
11 // background: url("../img/beers/pilsner.png") no-repeat;
12 //}
13 //.lager-background {
14 // background: url("../img/beers/lager.png") no-repeat;
15 //}

It is a clear fact that it is much more helpful to be able to iterate any kind of data.

Numbers:

Numbers and basic arithmetic are supported by Sass and Less both. However, there is a difference in the way how they handle the units.
Sass supports unit-based arithmetic. It supports complex units in any immediate form. Moreover, Sass has the conversion table which enables it to combine any comparable units.

SASS

1 1cm * 1em => 1 cm * em
2 2in * 3in => 6 in * in
3 (1cm / 1em) * 4em => 4cm
4 2in + 3cm + 2pc => 3.514in
5 3in / 2in => 1.5

Sass allows you to define your own units and can print out unknown units into your css. Less will not do it for you. It is done by Sass as a form of future proofing against changes in the w3c specification or in case a non-standard unit is introduced by the browser.

LESS

1 1cm * 1em => Error
2 2in * 3in => 6in
3 (1cm / 1em) * 4em => Error
4 2in + 3cm + 2pc => Error
5 3in / 2in => 1.5in

Colors:

Sass exposes a long list of color functions. It also provides an array of tools that helps to manipulate the colors.

Accessors:

1 red($color)
2 green($color)
3 blue($color)
4 hue($color)
5 saturation($color)
6 lightness($color)
7 alpha($color)

Mutators:

01 lighten($color, $amount)
02 darken($color, $amount)
03 saturate($color, $amount)
04 desaturate($color, $amount)
05 adjust-hue($color, $amount)
06 opacify($color, $amount)
07 transparentize($color, $amount)
08 mix($color1, $color2[, $amount])
09 grayscale($color)
10 compliment($color)

Variables:

With processors, it is possible for you to use the variables. Both Sass and LESS have variables. The difference is Sass define the variable with while LESS define the variable with sign.

For example in LESS

1 @mainLessColor: #ff0087;
2 p {color: @mainLessColor;}

And in Sass

1 $mainSassColor: #ff0087;
2 p {color: $mainSassColor;}

Both are almost same. From the user point of view, there is some problem with LESS as @ has a meaning in CSS which may create confusion while $ does not have any meaning so it does not create any problem.

Both of these are fantastic tools and can help you to work quickly and efficiently. However, you can not really say that which processor is better as it is the user’s call. If you prefer Ruby then you may opt for Sass, while if you are using PHP and Javascript then LESS may be a good option for you.
It totally depends upon your comfort level and your specific requirements that which one you opt for.

PRV MENU NEXT