Why Sass over Less

As  many people knows this fact that sass and less both are css preprocessor. Both are preffered over css due to less time consumption and less amout of effort. These both things are very popular among all the UI Developers now a days due to there amazing features.

Here is a list of benefits of Sass and Less over css

1. The one selector is defined only once and used multiple times with out writing it again.
2. Concept of inheritence is followed in both Sass and Less to reduce complexity.
3. Easy to write and understand.
4. Theme building is very easy as main color's and class are defined as variables and inherited at any point as needed.

As these are some features that makes Sass and Less far more powerful then css, but still they are complied finally in css to style the web document

Many Ui have comparison bewteen these things but flow will always will be like CSS > Sass > Less

As Sass is working amazingly as like Less but there are some differences between Sass and Less to be understand.

Here is comparions between Less and Sass and Why Sass is more Suitable then Less.

1. Sass gives easy way .to rewrite method and use logical statement , conditional loops and variables , as Less also provides such features but in a unconventional way
2. Sass have some amazing features like color manipulation methods, Parameters but Less have very limited funtions for this.
3. Sass comes with built-in compass library but Less doesn't. Compass library is like updated daily by the developers.
4. Compass Lets user to add framework like foundation, Gumby, Bootstrap top on the theme
5. Syntex is very easy as no need to use brackets and semicolon so time saving as well.

Loop in Sass

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

Loop in Less

.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;
//}

So these are Some basic compariosn bewteen less and sass as they have there own existence and suited diffrently according to there the requirements.

Thanks