Ask HN: LESS vs SCSS/SASS
Are there any glaring difference between the two that are not immediately apparent? They seems to share many similar concepts like mixins, variables, and inheritance. Has any one encountered problems with performance in production?
15 comments
There's a lot of misinformation in this thread.
First of all, recent versions of SASS include support for SCSS syntax, which means you can basically start with plain old CSS and learn to use variables, mixins, nesting, etc from there. Second, learning SASS syntax is not at all difficult. It's exactly like CSS, except without curly braces and semicolons, and it's whitespace sensitive. I find this results in much more readable code, and is much faster to write than standard CSS. In fact, writing regular CSS now feels like a chore, so I've started using Staticmatic (which supports HAML/SASS) when I want to do quick static prototypes.
It's strange that no one has done this yet so I wrote up an explanation of how the languages compare. It's too long to post here so I made a gist. I hope this will help you learn the differences and evaluate the two projects:
https://gist.github.com/674726
I am the author of compass so I definately understand Sass more intimately than Less. Please feel free to correct any misunderstandings I might have. Also note: I am comparing the versions of Sass and Less that they suggest on their main websites -- both have some very cool features and enhancements in the pipeline.
https://gist.github.com/674726
I am the author of compass so I definately understand Sass more intimately than Less. Please feel free to correct any misunderstandings I might have. Also note: I am comparing the versions of Sass and Less that they suggest on their main websites -- both have some very cool features and enhancements in the pipeline.
I struggled with the exact same question the last few days. Semantically both have the same features. You can find an informed comparison here: http://devtionary.com/?p=89
My initial preference was Less, because sass seemed framgmented with 2 syntaxes, and also less seemed more aesthetic, but I ended choosing Sass for the following reasons:
* Sass has Compass built over it http://compass-style.org/docs/ and this alone is the biggeast win over Less
Compass is a framework that comes with a foundation of components :
- compass core http://compass-style.org/docs/reference/compass/
- many plugins for different needs (search github for compass), special mentioning Susy liquid grid framework https://github.com/ericam/compass-susy-plugin
- with Compass I can monitor a whole directory of templates at once, and have them instantly compiled when I save from the editor, not sure if Less can do this
* Aptanta Studio 3 and few other IDE's know to syntax highlight sass and scss, not sure about less
* If you don't like the indentation syntax you can use the curly Scss, Scss and Sass are interoperable, you can call one from the other and vice versa
* The ruby version of Less is deprecated and I write a ruby based project (indeed, not all HN users are pythonists) Moreover, I don't like the idea on compiling the templates client side (as in less.js) and waste precios miliseconds, nor use an external interpreter (node.js)
My initial preference was Less, because sass seemed framgmented with 2 syntaxes, and also less seemed more aesthetic, but I ended choosing Sass for the following reasons:
* Sass has Compass built over it http://compass-style.org/docs/ and this alone is the biggeast win over Less
Compass is a framework that comes with a foundation of components :
- compass core http://compass-style.org/docs/reference/compass/
- many plugins for different needs (search github for compass), special mentioning Susy liquid grid framework https://github.com/ericam/compass-susy-plugin
- with Compass I can monitor a whole directory of templates at once, and have them instantly compiled when I save from the editor, not sure if Less can do this
* Aptanta Studio 3 and few other IDE's know to syntax highlight sass and scss, not sure about less
* If you don't like the indentation syntax you can use the curly Scss, Scss and Sass are interoperable, you can call one from the other and vice versa
* The ruby version of Less is deprecated and I write a ruby based project (indeed, not all HN users are pythonists) Moreover, I don't like the idea on compiling the templates client side (as in less.js) and waste precios miliseconds, nor use an external interpreter (node.js)
It's not actually true that Sass and Less have the same features. Each has some features the other doesn't, with Sass having substantially more than Less. Notable examples include the ability to use variables in selectors, the @extend directive, and a wealth of useful built-in functions. It's because of these and other features that Compass can be built on Sass, where it couldn't be built on Less.
Disclaimer: I'm the author of Sass.
Disclaimer: I'm the author of Sass.
I started using LessCSS back when SCSS didn't exist, so it was a choice between SASS' brand new, backwards incompatible syntax and Less' "progressive enhancement" philosophy.
Since then SASS has grown the SCSS syntax, but haven't really given me a reason to bother switching.
Also: Less now has the even better less.js, which is handy for quickly throwing together less stylesheets and really fast on the command line compared to the old Ruby version (an order of magnitude faster for 4,000+ line files).
Since then SASS has grown the SCSS syntax, but haven't really given me a reason to bother switching.
Also: Less now has the even better less.js, which is handy for quickly throwing together less stylesheets and really fast on the command line compared to the old Ruby version (an order of magnitude faster for 4,000+ line files).
I prefer LESS because, stylistic-ly (to me at least), it feels more like CSS with extra sugar vs SASS which doesn't feel as natural. YMMV though.
LESS doesn't force you to change your CSS coding style too much, and provides you with the power you need if you want to.
The most useful feature of LESS is simply nesting / indentation.
Since it's not syntactically different from CSS, you can start a LESS stylesheet from a standard CSS stylesheet and move forward from there with LESS.
The most useful feature of LESS is simply nesting / indentation.
Since it's not syntactically different from CSS, you can start a LESS stylesheet from a standard CSS stylesheet and move forward from there with LESS.
I've only used Less, though I may look into Sass again to get a more recent comparison.
Compass hasn't interested me much.
Compass hasn't interested me much.
I've only used LESS (and less.js, mostly the latter), haven't seen any problems so far, neither performance, nor otherwise.
Neither until they have browser support for debugging issues (i.e. firebug must be able to render the native LESS/SCSS ).
Experimented with Sass/Compass then Less; personally, strongly prefer Less.