Sass vs Less
Make sense of both sides of the argument
What is the smarter language that is smarter than CSS?
SASS
Flat CSS file
Node vs Ruby
Sass has a less ambiguous/confusing mixin syntax
Ecosystem
Compass framework
Allows for a huge amount of mixins contributed by the community (and very smart at times) to be shared and to save the time for many people.
Bootstrap has been ported to sass
Bootstrap sounds cool, so of course somebody has ported it to sass.
Sass supports nesting, too
Sass supports nesting stylesheets and mixins as well.
Server side
Why should you make all your users compile your stylesheets when you can do it once for all of them.
What would your site look like if javascript is disabled.
Conditions in CSS
Hi Guys,
i really like the simple approach behind less and would like to have conditions like they are possible in scss or sas:
f.e. you ask the user in a cms to setup a color:
And then you need to calculate the textcolor from this color, you will need something like a condition to ensure, that the contrast is still big enough to read the text.
footer-container {
color: lighten($main-color,15%); } @else { color: darken($main-color,20%); }
}
Thanks in advance Kay
sass also supports a curly syntax
There is also a Compass App for Mac OSX
Similar to the Less app, the Compass app monitors your folders real time and compiles css on changes. You can also can also begin projects from the app using blueprint, 960gs, html5 boilerplate e.t.c.
Argument miscategorized?
SASS Control Directives
SASS allows for the use of control directives for including styles only under some conditions or including the same style several times with variations.
Loops
Sass allows you to create loops. This makes large amounts of of sequencial code easy to generate like grid measurements. Use @for and @while to create loops.
This is possible in SASS with @extend
Adding @extend .class-name to a selector adds the @extended selector to the .class-name selector.
SASS support nested media queries
Classes as mixins considered harmful
The Sass team originally thought this was a good idea, but upon further consideration decided that it violated the Principle of Least Astonishment. It’s not hard to extract a mixin, so the time savings of using classes as mixins is lost the first time you change a class and it propagates unexpectedly through your stylesheets.
The less watcher not as convenient as you think at first
The Less javascript watcher is very nice, but when development is over you have to edit your templates and change the links to point to the real CSS files instead of the less files unless you want to have a javascript dependency.
If you use a tool like LiveReload in combination with the sass watcher, there’s no markup changes required to have live updates in your webpage.
Mixins produce a more elegant and compact endresult
Less: .test produces: .test, test2
Sass: @mixin test{} .test2 {@include test} produces: .test2
Besides the fact that the ‘mixin’ names do not appear in the endresult (kind of namespacing which avoids occasional nameclashing), it also has the advantage that all the not used mixins do not get included in the end result.
Sass has a watch feature too
Line-tracable debugging support in Firebug
The FireSASS Firebug extension means that with supported compilers (such as LiveReload or the Drupal Sasson theme), you don’t have to give up Firebug - an essential tool for most front-end coders.
Without FireSass, Firebug use for any compiled CSS language will only allow you to trace to the compiled css line number, leaving Less without adequate debugging tools. NOTE: A FireLESS extension was developed, but has had poor support, and I’ve never seen it actually work.
Plenty of other options
Show all
LESS
Convenience
Classes can be used as Mixins
LESS.js - Client Side
Better CSS3 support
Many LESS frameworks
There are many LESS frameworks, including Centage and Twitter’s Bootstrap. Each come with customizable column layouts, plenty of mix-ins, helpers and more.
LESS can do the same thing with Node
There's a Less App for Mac OSX
There’s a free to download Mac App that compiles Less for you in a GUI that watches your folders. Very easy to use and makes redundant the anti Node.js argument. Node.js isn’t needed.
ability to use nesting instead of, or in combination with cascading
LESS gives you the ability to use nesting instead of, or in combination with cascading. Lets say we have the following CSS:
header
header .navigation {
font-size: 12px; }
header .logo {
width: 300px; }
header .logo:hover {
text-decoration: none; }
In LESS, we can also write it this way:
header {
color: black;
.navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } } } Or this way:
header { color: black;
.navigation { font-size: 12px } .logo { width: 300px; &:hover { text-decoration: none } } } The resulting code is more concise, and mimics the structure of your DOM tree.
Progressive Enhancement
Ecosystem
Bootstrap is already in LESS
Bootstrap is already in less, which counters the fact that Bootstrap is converted to Sass.
Learning Curve
Platform Support
The original ‘lessc’ is a Ruby gem. It still works, and LESS can run from Ruby, converting files and watching for changes.
The current LESS compiler runs in Javascript. This means it can run in nearly any browser on the internet (seriously, who turns Javascript off, or runs IE5?). The Javascript base also lets it run anywhere Javascript can run, which includes Adobe Air applications, and on the JVM with Rhino, which in turn means it can be called from any JVM language like Java, Scala, ColdFusion, Clojure, Groovy, and so on.
The Javascript core also supports NodeJS, which has been very quickly gaining support throughout the web development world.
Furthermore, there are unofficial, and very good, ports to other platforms.
The LESSPHP project (http://leafo.net/lessphp/) is on version 2.0, and still under continuous development. This PHP version serves LESS files from the web server, and has a command-line converter and file watcher much like the Ruby version.
The DOTLESSCSS project (http://www.dotlesscss.org/) brings a LESS compiler to the .NET world, which can intercept and compile less files through an IIS file handler, or programmatically in an ASP.NET application, or from the command line, again, like the Ruby version. This project is still under active development and has created some buzz in the .NET world. DOTLESSCSS means LESS can run with any CLI language as well, so it integrates with C#, VB.NET, C++, F#, Iron Python/Ruby/Lisp, and more.
More people know Javascript
Scoping
Less handles scopes as I expect it:
Sass | Less
-------------------------+-----------------
$color: black; | @color: black;
.scoped { | .scoped {
$bg: blue; | @bg: blue;
$color: white; | @color: white;
color: $color; | color: @color;
background-color: $bg; | background-color: @bg;
} | }
.unscoped { | .unscoped {
color: $color; | color: @color;
// Would be an error | // Would be an error
// background: $bg; | // background: @bg;
} | }
And their different output:
Sass Output | Less Output
----------------------------+----------------------------
.scoped { | .scoped {
color: white; | color: white;
background-color: blue; | background-color: blue;
} | }
.unscoped { color: white; } | .unscoped { color: black; }
Node as easily installed as Ruby.
Making the argument that Ruby is installed on more systems is an argument from authority. The same argument could have been made 5 years ago against Ruby v. PHP, and look where we are today. I’d make the counter-argument that configuring Ruby with gems can be just as difficult with versioning as installing Node. Not a valid argument for SASS.
Less can be compiled offline to CSS as well
LESS has default mixin values
you may define default values into mixins so you need not pass arguments to call them, like:
.color(@color: red){//parametric mixin color: @color; }
.sometext{ .color; }
just fine ;)
"SASS"
"LESS"
Embed this debate
Is an argument missing?
Please contribute - sign in and add the argument yourself.
Is an argument inaccurate, incorrect or has it been debunked?
Please contribute a counter-argument that gives a reasonable response to the argument with a web address to a reference for further reading.
Does the text of an argument misrepresent it in a biased or inaccurate way?
Please tweet @stef on Twitter to start a conversation about how to fix it.