Less vs Sass? It’s time to switch to Sass

Tags: , , , &

less-vs-sass-its-time-to-switch-to-sass-by-Zing-Design

The CSS pre-processor debate

The Sass vs. LESS argument has been done to death. In this series I’ll talk about why Sass really is the best, why you should start using Sass if you haven’t already, how to get started using Sass and Problems with pre-processors, alternatives to Sass and CSS4.

Before I begin my highly opinionated tirade, let me just mention that I learned Less first. Less is great for beginners, it’s really easy and quick to set it up. It’s very similar to plain CSS, so writing it is intuitive. Compared to CSS, everything about LESS was very easy and friendly, I was quite enjoying Less for a short while…

…until I discovered the truly awesome power of Sass and Compass. Looking back, I like to imagine Less as the training wheels for beginners; or perhaps a gateway-drug into preprocessed CSS. Sass is the next level, a tool for the slightly more experienced front-end developer.

Why Sass is better than LESS

  • Sass lets you write re-usable methods and use logic statements; ie. conditionals and loops. LESS can do these things but in an inefficient and counter-intuitive way (ie. guarded mixins for conditionals, self-referencing recursion for loops). Like Less, Sass comes with lots of very handy functions built-in including colour manipulation, mathematics, and parameter lists.
  • Sass users can utilise the awesome power of the Compass library. There are libraries available to Less users, 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 generation, legacy browser hacks, and cross-browser support for CSS3 features.
  • Compass also lets you add an external framework like Blueprint, Foundation, 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.

Problems with Less

Less aims to be as much like CSS in style, syntax and structure, and while this is a nice thought for easing users into writing it, there are a few issues which make it a lot less fun to work 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:

@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...
}

Hmmm… Which would you rather use?

Problems getting started with Sass and Compass

It seems like the biggest problems that folks have with moving to Sass are:

  • The added hassle of setting up the Ruby environment
  • Crippling fear of the command line
  • The inconvenience and time involved switching to a different tool

We’ve written a tutorial for beginners eager to make the move to Sass and Compass which details every step to show just how easy and fast it is to get started, the awesome power of Compass, and how similar writing Sass is to other technologies.

If you’re already a Sass addict, take a look at our post about the problems with pre-processed CSS and the future of web presentation.

With the enormous popularity of Twitter’s Bootstrap, many designers and developers are moving toward this framework to fulfil their presentational needs. I’ve seen quite a few developers grumpy about the fact that it is built with Less. As mentioned in another article, There are several forks of Bootstrap (like this one) which let developers customise their favourite framework in their favourite pre-processor language.

People who have viewed this post also viewed

Comments

  1. Rick O'Shea

    Give that opening paragraph a title…

    Why Less is Better Than Sass

    … and add a few more positive characteristics of Less if there are any.

    I thought your post was pretty fair and objective, and it’s now clear Sass is the community favorite, but Less deserves at least a tip of the hat.

    Reply
  2. Benny McTavish

    I fell in love with LESS but then I discovered SASS which is better because the website looks better. But now I use CHIPnozzle because its technical debt is offset by its short shelf life of 17 weeks until DOH gets a beta release round the back of my local Asda from a bloke called Chickenhead who once went to a conference organized by Smashing Magazine.

    Reply
  3. anu

    No, SASS needs to learn a lot from LESS. Specially importing files feature. It’s been years still the SASS team hasn’t implemented a css file import feature. SASS import also renders duplicate styles. On LESS it removes duplicate styles and gives you a better css. LESS also has import as reference while SASS has just import, where the whole file gets imported. IMO SASS is just overrated.

    Reply
    1. Nuno

      In my opinion i don´t think that SASS is more Powerfull than LESS. And yes SASS is overrated from websites like yours!!! 😀

      Reply
  4. John

    Not sure what the hassle of installing ruby is. Download ruby installer from http://rubyinstaller.org (I picked the Windows 64bit one) double click it. Make sure to add ruby to the path during installation. Installing sass is than nothing more as opening a cmd prompt and type “gem install sass” (you could even copy paste it from here!) It took about 10secs.

    If you’ve ever installed 64bit apache, mysql, and php on Windows, you really know what a hassle is. 🙂

    Reply
  5. Erhan

    Awesome post, thanks for sharing.
    SASS is brilliant for sure however i am not sure if it is necessary to bring that much logic to CSS. For example i am using angular at the moment and i am including component/feature specific css partials to project. Therefore i do not need that much logic over CSS. LESS is doing fine with the hierarchy and some mixins. So i guess i do not want to make overengineering in overall for my project. Simple is always the best.
    Cheers.

    Reply
  6. Roy Tinker

    Responding to some of the “you’re wrong, LESS is better” comments: I suspect LESS and SASS relate similarly to Python and Ruby in personality and style, both of the tools and of the people who appreciate them. Martin Fowler wrote a now-classic article (here: http://martinfowler.com/bliki/SoftwareDevelopmentAttitude.html) on the “directing vs. enabling” dichotomy – to summarize, some people prefer tools that point them in a particular direction and keep them from making mistakes (directing), while others prefer open-minded tools that give them lots of power and let them choose how to use it (enabling). Which style a person prefers is a matter of personality.

    I suspect that as long as software continues to be written, programmers will tend to divide into these two preferential camps.

    Reply
  7. Eduardo

    I learned less in 5 minutes, without any tutorial.
    I just took my css and made a search-replace for repeating values to create a variable.

    For me LESS Is the winner because of its simplicity and intuitiveness.

    Simplicity is power.

    Reply
    1. Hendrikto

      I would not call that “learned” by a long shot. That’s just ONE feature. If you just want to use variables and nothing else it’s exactly the same in Sass, just replace $var by @var…

      If you want to start using any other features, go with Sass.

      Reply
    2. David Puerto

      I think you missed the points he made about looping through any kind of data. The cumbersome way to create loops to iterate through data (guarded mixins) is not simplicity nor is it powerful.

      Reply
  8. Jimmy D

    I’ve still to find a single compelling reason to switch to either of them over writing plain old fashioned CSS.

    “Oh but mixins and loops and conditionals”
    Don’t care. They don’t provide any advantages over writing clean, modular css.
    They don’t speed up my workflow, they don’t reduce my file sizes.

    Emperor’s new clothes.

    Reply
    1. Ryan

      The advantage is that you can still write clean CSS a whole lot quicker. My favorite feature is that you can modularize your code into separate files and know that everything will compile nicely into a single file. I can generate an IE-friendly stylesheet with a flick of a finger (desktop only styles). I no longer have thousand-line CSS files. I used to be like you, until I started using it. Now I won’t start a project without it. The final result is smaller and cleaner than I could do by hand.

      Reply
    2. THVR

      Only one compelling reason?
      How about the use of variables?

      You have no idea how much time it saves me to store colors (for example) in variables.
      Gone is the time where I had to change every color manually (search and replace is not always what you want)!

      Maybe you should just try it out, give it a shot.
      I guarantee, after a few projects working with SASS, you’ll never want back to just plain CSS…

      Reply
    3. David Puerto

      I was of this school of thought until just recently when I was redoing some LESS to be more modular and decided to do the interactions in a single, modular loop with an animation timing and delay variable to iteration through all the children one after the other like Sass:

      for $i from 1 through 100 {
      &:nth-child(#{$i}) {
      animation-delay: $i * $animationDelay;

      but this was a bust and needed to use Sass instead of less. Using straight up JavaScript may be the better choice than CSS for a real argument…

      Reply
  9. BASTA!

    It is a good thing that you listed “the added hassle of setting up a ruby environment” as number one.

    It is a bad thing that you listed the second and third problem as second and third instead of one-billion-and-second and one-billion-and-third.

    Compared to the fact that for lots of people setting up a ruby environment involves SWITCHING HOSTING PROVIDERS, all other reasons are of infinitesimal importance.

    Reply
    1. Hendrikto

      Why would you need to switch hosting providers?? You can just compile it on your local machine and upload plain old css…

      Reply
  10. Matt

    Wow. 4 years ago I was very pro LESS but switched to SASS because of the Compass library and Ruby support. While LESS may be simpler, it’s also less powerful. That being said, you don’t HAVE to use every feature in SASS and the CSS generated by SASS is no more bloated than CSS generated by LESS. The old 80/20 rule applies here folks. I rarely use more than a few SASS’s features, but when I do need the other features, they are there. They aren’t there in LESS. The End. I think there may be a lot of Bootstrap users reading this that don’t realize that Bootstrap also supports SASS, and they may be overreacting. I really thought this debate was over and SASS won. I’m surprised. Next thing you’ll be telling me that jQuery vs MooTools vs Prototype is still a thing.

    Reply
  11. Anton

    I couldn’t disagree more. LESS is more intuitive, has fewer features, and the main goal of LESS is to be able to compile CSS easily – that’s all the matters after all. I strongly DO NOT advocate for re-use, conditionals, etc in CSS because that makes CSS not user friendly, and too abstract. So no, SASS is not necessarily, LESS is the perfect solution 98% of the time.

    Reply
  12. Betty

    Hello,

    I’m considering learning LESS or SASS. Can you advice which is more suitable for use with Bootstrap and/or WordPress ? I’m aware of the official Sass port:https://github.com/twbs/bootstrap-sass

    1. Advantages of SASS are obvious for me, but does it win also with Bootstrap / WordPress ?
    2. Also does it make sense to use Compass if use Boostrap?

    Reply
  13. Phillip Harrington

    “The Sass vs. LESS argument has been done to death. ” Weird way to start an article about the Sass vs. LESS argument.

    Meanwhile, why do people keep trying to turn declarative languages into procedural ones?

    Reply
  14. Bruno Rodrigues

    Great artcile!!
    Makes three months that changed the LESS and SASS see the big difference in my workflow. LESS is not bad, but the SASS treated me better from a project, from this project started using it and never stopped!
    =D

    Reply
  15. Paul Griffin Petty

    There wasn’t enough concrete evidence to sway me here. I’ve used both Less & Sass, and prefer Less. I’ve found it much easier to refactor existing CSS in to a Less file. I also like that less.js compilation negates the need to run a host-based compiler which is incredibly useful at times. Overall, I think both have their pros & cons and depending on many aspects of a project either one might be the best fitting solution. So why not learn both & know them well enough to understand which is right …

    Reply
  16. Mike

    Firstly, Prepros – http://alphapixels.com/prepros/ If you’re not using it, use it.
    Secondly, a major turn-off in Sass is the lack of dynamic imports. I.E. you cannot do this: @import “style#{$somevariable}.scss”;
    LESS mixins look nicer too – I much prefer
    body {
    .mymixin;
    }
    to
    body {
    @include mymixin;
    }
    The only place Sass has the upper hand is with the looping and the conditional logic. Sure, Compass is nice, but once you’ve got a white-label codebase to start your sites from, it’s hardly a game-changer.

    Reply
  17. Luke Page

    What a troll artical. At least take the time to make sure you have your facts straight and consider more than the very basics.
    > In Sass you can iterate through any kind of data, which is much more helpful:
    Incorrect, in less you can loop through anything too – lists in less are the same as lists in css, e.g. @var: a, b, c; you can then get the length and extract each item using the extract function.
    > Custom functions
    In less you can return values from mixins which does the same as a custom function. you can also provide your own javascript custom functions and javascript plugins to do AST modification.
    And that was just from a 1 minute skim read.

    Reply
  18. Grsmto

    Why “and Compass”?
    You can perfectly use Sass without Compass (and use Bourbon instead, for example).
    Sass+Compass is NOT a default bundle. That is also a reason why people don’t want to leave LESS : no big mess of mixins/docs coming with it.

    Reply
  19. Asa Williams

    I have used both LESS and Sass (scss) in multiple large scale projects. I started out with LESS on a few projects but then switched to Sass + Compass. Sass is awesome with all of it’s many features and I really started to like it. But, after a while Sass began to really affect my productivity … in a bad way. Like many other developers, I started to use tools like grunt to build preprocessed css, precompiled templates, and a number of other things. During one project the watcher was taking way to long (3 – 5 secs) to build the my css using Sass. I dont like waiting for this kind of thing and it started to really annoy me. For the next project, I switched back to LESS b/c I heard it was faster. And yes, it was much faster. To the point where i didnt have to worry about it. So, for me speed of compilation was more important than the feature set. The features you mention above are things that I only use on extremely rare occasions and I found that I dont really need compass. For some, Sass might be the right choice, but for me and my teams it’s not. I would try out the different preprocessors yourself and see which one you like, not which one has the bigger feature set.

    Reply

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text