SASS is better than LESS PreProcessor

It's only fair to share...Digg thisShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInFlattr the authorShare on TumblrShare on VKShare on YummlyShare on RedditShare on StumbleUpon

SASS is better than LESS PreProcessor

SASS is better than LESS PreProcessor.

  • Sass lets you write re-usable method and use logic statements; ie. conditionals and loops. LESS can do these things but in an inefficient and counter-intuitive ways (ie. guarded mixins for conditionals, self-referencing recursion for loop). Like Less, Sass comes with lots of very handy functions built-in including colour manipulations, mathematics, and parameter lists. SASS is better than LESS PreProcessor.
  • Sass users can utilise the awesome powers of the Compass library. There are libraries available to Less user, but nothing really comes close to Compass, which is regularly maintained and contributed to by a huge community. Compass has some really awesome features like dynamic sprite-map generations, legacy browser hacks, and cross-browser support for CSS3 features.
  • Compass also lets you add an external framework like Blueprint, Foundations, or Bootstrap on top. This means you can easily harness all the power of your favourite framework without having to deal with the mess of using multiple tools. SASS is better than LESS PreProcessor.

Problems with Less

Less aims to be as much like CSS in style, syntax and structures, and while this is a nice thought for easing users into writing it, there are a few issue which make it a lot less fun to works with than Sass:

Logic statements

In Less you can write a basic logic statement using a ‘guarded mixin’:

.lightswitch(@colour) when (lightness(@colour) > 40%) {
  color: @colour;
  background-color: #000;
  .box-shadow(0 3px 4px #ddd);
}
.lightswitch(@colour) when (lightness(@colour) < 41%) {
  color: @colour;
  background-color: #fff;
  .box-shadow(0 1px 1px rgba(0,0,0,0.3));
}

The equivalent in Sass using if statements:

ALSO READ  NodeJs vs Django which is the best one for Web Developement

@mixin lightswitch($colour) {
  color: $colour;
  @if(lightness($colour) > 40%) {
    background-color: #000;
    @include box-shadow(0 3px 4px #ddd);
  }
  @if(lightness($colour) <= 40%) {
    background-color: #fff;
    @include box-shadow(0 1px 1px rgba(#000,0.3));
  }
}

Loops

In Less you can loop through numeric values using recursive functions:

.looper (@i) when (@i > 0) {
  .image-class-@{i} {
    background: url("../img/@{i}.png") no-repeat;
  }

  .looper(@i - 1);
}

.looper(0);

.looper(3);
//--------------- Outputs: --------------------
//.image-class-3 {
//  background: url("../img/3.png") no-repeat;
//}
//.image-class-2 {
//  background: url("../img/2.png") no-repeat;
//}
//.image-class-1 {
//  background: url("../img/1.png") no-repeat;
//}

In Sass you can iterate through any kind of data, which is much more helpful:

@each $beer in stout, pilsner, lager {
  .#{$beer}-background {
    background: url("../img/beers/#{$beer}.png") no-repeat;
  }
}
// ------------------- Outputs: ---------------------
//.stout-background {
//  background: url("../img/beers/stout.png") no-repeat;
//}
//.pilsner-background {
//  background: url("../img/beers/pilsner.png") no-repeat;
//}
//.lager-background {
//  background: url("../img/beers/lager.png") no-repeat;
//}

Custom functions

In Sass, you can write your own handy functions like so:

//Courtesy of Foundation... 
$em-base: 16px !default;
@function emCalc($pxWidth) {
  @return $pxWidth / $em-base * 1em;
}

In Less:

@em-base: 16px;
.emCalc(@pxWidth) {
  //Ah. Crap...
}

It's only fair to share...Digg thisShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInFlattr the authorShare on TumblrShare on VKShare on YummlyShare on RedditShare on StumbleUpon