Sass vs Less
Make sense of both sides of the argument
SASS
LESS
Flat CSS file
Node vs Ruby
Sass has a less ambiguous/confusing mixin syntax
Ecosystem
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.
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.
SASS support nested media queries
Bootstrap has been ported to sass
Bootstrap sounds cool, so of course somebody has ported it to sass.
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.
sass also supports a curly syntax
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 {
@if lightness($main-color) < 10% {
color: lighten($main-color,15%);
} @else {
color: darken($main-color,20%);
}
}
Thanks in advance
Kay
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.
Sass supports nesting, too
Sass supports nesting stylesheets and mixins as well.
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.
Mixins produce a more elegant and compact endresult
Less:
.test{...}
.test2{.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.
This is possible in SASS with @extend
Adding `@extend .class-name` to a selector adds the @extended selector to the .class-name selector.
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](https://github.com/mockko/livereload) in combination with the sass watcher, there's no markup changes required to have live updates in your webpage.
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.
Sass has a watch feature too
Plenty of other options
Smart Sprites support
// Vertical
@import "icon/*.png";
// Horisontal
$icon-layout:horizontal;
@import "icon/*.png";
// Diagonal
$dropcap-layout:diagonal
@import "dropcap/*.png";
// Smart
$mysprite-layout:smart;
@import "mysprite/*.png";
Global scope
That Sass uses global variables has never bothered me. The advantage IMO, being that it's just as complex as it needs to be in order to get the job done neatly, without complicating things beyond what is necessary. I can't think of a time where I've wanted Sass variables to have more sophisticated scoping.
Convenience
Classes can be used as Mixins
LESS.js - Client Side
Better CSS3 support
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; }
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.
LESS can do the same thing with Node
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 { color: black; }
#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
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.
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.
Less can be compiled offline to CSS as well
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.
Bootstrap is already in LESS
Bootstrap is already in less, which counters the fact that Bootstrap is converted to Sass.
Ecosystem
LESS - Server Side
More people know Javascript
LESS also supports nested media queries, now
Less can do loops too!
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 ;)
More tools supporting LESS
I really like LESS. Because SynStar supports LESS:
http://the-sync-star.com/documentation/less-file-support/
It is so cool because when you save the LESS file, it will be automatically compiled, uploaded, and then browser is refreshed!
With LESS, we make the css code much much more maintainable, that's the key point.
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.