SASS vs. LESS

I think the individual comparisons are good, but the conclusion is wrong. Yes, Sass is technically superior to Less; it can do a lot of things that Less cannot. That does not mean that you should use Sass over Less.<p>The truth is, for 99% of use cases they are exactly the same. Sass is a bit more mature and it allows more programming, so it is potentially more powerful than Less, but that also allows it to deviate for CSS further, which is not necessarily a good thing if you have to work with people who only know CSS.<p>I personally use Less because it helps me develop faster. Less is implemented in JavaScript, which means it can run in the browser. Less.js' "watch mode" is awesome for speeding up development: save your .less stylesheet and the browser immediately shows the new styles. This is something SASS cannot do and.<p>Finally, to correct some factual errors in the article: Less <i>does</i> allow some programming, loops etc. It's just incredibly awkward and barely useful, but you can use JavaScript (I used that to make this: <a href="https://github.com/micheljansen/dynamicgif.less" rel="nofollow">https://github.com/micheljansen/dynamicgif.less</a>). Also, the "Helping with CSS3" point is moot if you use <a href="http://lessprefixer.com/" rel="nofollow">http://lessprefixer.com/</a> and keep that updated.

He uses SASS and SCSS interchangeably. For anyone else not familiar with the difference:<p><i>"Sass consists of two syntaxes. The original syntax, called "the indented syntax" uses a syntax similar to Haml.[2] It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, "SCSS" uses block formatting like that of CSS. It uses curly brackets to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss respectively."</i><p><a href="http://en.wikipedia.org/wiki/Scss" rel="nofollow">http://en.wikipedia.org/wiki/Scss</a><p>Also:<p><i>"Sass and LESS both use the standard CSS syntax. This makes it extremely easy to convert an existing CSS file to either preprocessor. Sass uses the .scss file extension and LESS uses the .less extension. The basic Sass or LESS file can be setup like below:<p>...<p>As you may have noticed, this is just regular CSS, which compiles perfectly in both Sass and LESS. It’s important to note that Sass also has an older syntax, which omits semicolons and curly brackets. Although this is still around, it is old and we won’t be using it past this example. The syntax uses the .sass file extension and looks like this:"</i><p><a href="http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/" rel="nofollow">http://net.tutsplus.com/tutorials/html-css-techniques/sass-v...</a>

What about stylus?<p><a href="http://learnboost.github.com/stylus/" rel="nofollow">http://learnboost.github.com/stylus/</a><p><a href="http://visionmedia.github.com/nib/" rel="nofollow">http://visionmedia.github.com/nib/</a><p>More?<p><a href="http://news.ycombinator.com/item?id=3945633" rel="nofollow">http://news.ycombinator.com/item?id=3945633</a><p>Some compiler geek should create a tool to translate code from one preprocessor to another, so mixin support would not be an issue.

I've always considered SASS the only true successor to CSS.<p>LESS and SCSS are syntactically conservative. I feel they retain the grammatical conventions of CSS (curly braces) as a way to ease the learning curve for conservative developers.<p>They introduce developers to the powerful features (mixins, variables) of extended CSS. But retain their familiar CSS curly bracket syntax.<p>Eventually it makes sense for said conservative developers to take the next step and adopt SASS's clean syntax.

That was an awkard conclusion on "Active Development". The total number of issues and pull requests on LESS dwarfs that of SASS, so a larger number of open/pending ones is natural. Some more numbers:<p><pre><code> Watchers: SASS: 1022 LESS: 5480 Forks: SASS: 138 LESS: 731 Total issues: SASS: 390 LESS: 809 Total pull requests: SASS: 62 LESS: 199 </code></pre> That's a clear win for LESS in my book.

LESS became popular thanks to Twitter Bootrstrap and to the fact that you don't need Ruby to use it, which is a big plus for Windows users.<p>I use them both on daily basis, SCSS &#38; Compass for a Sencha Touch project and LESS &#38; Bootstrap for web dev work, along side with CodeKit to compile them and the major difference that I see is the speed of compiling. The projects I work on are both pretty large and with many .scss/.less files but LESS compiles way faster for me and this is a big plus.<p>Also, LESS is pretty useful for rapid prototyping since you can use the less.js and skip the compiling part altogether.

So, at the point CSS becomes a programming language of its own I'd rather just use java script. Somebody should come up with some way to define you style data in JSON, then parse and process the data on load.

Sass also has Susy, which is just a <i>superb</i> grid system. I can't adequately express in words how much I love this grid system. It's mahtava.<p><a href="http://susy.oddbird.net/" rel="nofollow">http://susy.oddbird.net/</a>

This is a really good writeup and I really appreciate the bit at the end about pull requests and issues as I do feel that developers should stay on top of their communities. That said, I like the mixin syntax of Less better and my favorite project Bootstrap uses Less, so I'll stick with Less.

Good write-up<p>Not sure on my history here but i'm pretty sure i remember only the SASS variant being available (no braces among other things) while LESS stuck to a more css-like grammar. later SCSS came along which was CSS grammar for SASS.<p>It seems like I've run into more projects using LESS -- anyone know of any statistics?

IMO, SASS ~= LESS, but Compass &#62; *. Damn shame that Twitter Bootstrap went with LESS.

It's Sass not SASS.<p><a href="http://sass-lang.com/" rel="nofollow">http://sass-lang.com/</a>

The author makes the point that LESS uses the `@` for a variable identifier while SCSS uses `$` (and that he feels this is better) but CSS4 spec today says it will use `$` for parent selectors.<p><a href="http://www.w3.org/TR/selectors4/#subject" rel="nofollow">http://www.w3.org/TR/selectors4/#subject</a><p>I don't do a lot of FE dev but I can count the number of times I've used `@` on one hand. However, I could see myself making use of `$` as a parent selector quite often. How would SCSS adapt to this?

As far as I'm concerned, Less, Sass and Stylus all provide the features for the way I like to write styles (DRY, with composability) so the main thing that influences which I'll use on a project is how easily it fits into the workflow. That means Stylus for Express projects, Sass for Python/Flask.<p>When I'm at my day job I use Less (well, more specifically Lessphp) for the simple reason that there's a Drupal module for it, which integrates very well with building Drupal sites.

That looping construct in LESS is rather reminiscent of C++ template metaprogramming. Or ML/Haskell without higher order functions.

This comparison distracts from better stuff out there: <a href="http://therain.posterous.com/sass-scss-lessthey-all-suck" rel="nofollow">http://therain.posterous.com/sass-scss-lessthey-all-suck</a>