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':
<style>
.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));
}
</style>
The equivalent in Sass using if statements:
<style>
@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));
}
}
</style>
Loops
In Less you can loop through numeric values using recursive functions:
<style>
.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;
//}
</style>
In Sass you can iterate through any kind of data, which is much more helpful:
<style>
@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;
//}
</style>
Custom functions
In Sass, you can write your own handy functions like so:
<style>
//Courtesy of Foundation...
$em-base: 16px !default;
@function emCalc($pxWidth) {
@return $pxWidth / $em-base * 1em;
}
In Less:
@em-base: 16px;
.emCalc(@pxWidth) {
//Ah. Crap...
}
</style>
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.
Want to get started with Sass and Compass?
Check out our 20 minute Sass and Compass tutorial for absolute beginners!
We hope you've enjoyed reading this article. Why not sign up to our newsletter to receive regular updates on our latest projects, research, and other news in the world of technology, web design and development.
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':
<style>
.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));
}
</style>
The equivalent in Sass using if statements:
<style>
@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));
}
}
</style>
Loops
In Less you can loop through numeric values using recursive functions:
<style>
.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;
//}
</style>
In Sass you can iterate through any kind of data, which is much more helpful:
<style>
@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;
//}
</style>
Custom functions
In Sass, you can write your own handy functions like so:
<style>
//Courtesy of Foundation...
$em-base: 16px !default;
@function emCalc($pxWidth) {
@return $pxWidth / $em-base * 1em;
}
In Less:
@em-base: 16px;
.emCalc(@pxWidth) {
//Ah. Crap...
}
</style>
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.
Want to get started with Sass and Compass?
Check out our 20 minute Sass and Compass tutorial for absolute beginners!
We hope you've enjoyed reading this article. Why not sign up to our newsletter to receive regular updates on our latest projects, research, and other news in the world of technology, web design and development.
