Web Technologies

SASS or LESS ?

April 22nd, 2013 at 08:04

So if you haven’t heard of css preprocessors – where have you been ?

Writing your css in a extended feature rich language and then compiling the code to plain old CSS so that it can be read by Web browsers in the normal way is the norm amongst professional front end web developers today. Several CSS preprocessors are available today, most notably Sass and LESS.

I have been using LESS for a year or so now on personal projects and although not having had much chance to use it at work, have snuck it into a some projects. I really like it the ability to use nested rules, variables and mixins makes the whole css writing much less painful. On a recent project the Windows on War Soviet war posters project for Manuscripts Adam and I also learnt that PHPStorm had some inbuilt support for compilation of LESS making it a breeze to use. However I have been doing some other work which makes me think I should actually be using SASS. Whilst I have played around I have not used it in anger.

So why what makes me think SASS has won the preprocessor war, well I suppose number one is SASS has been adopted by RoR for a long time and it does seem slightly more feature rich. The other having had some time to play with it now it is looking really quite interesting. You don’t have to use all of these exciting features to get some benefit out of Sass, but they can make complex or repetitive CSS much easier to write, and understand.

Sass is more akin to a programming language so if you are a developer then there is more of a leaning towards you.
Sass has actual logical and looping operators in the language. if/then/else statements, for loops, while loops, and each loops that make it feel much more like programming.

e.g.

 @if $boolean
    @debug "$boolean is #{$boolean}"
    display: block
  @else
    @debug "$boolean is #{$boolean}"
    display: none

Sass
So I think next opportunity I am going to give SASS a proper airing and see how it goes.

Comments are currently not open for this post.