Menu Search
Jump to the content X X
Smashing Conf San Francisco

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

An Introduction To LESS, And Comparison To Sass

I’ve been using LESS1 religiously ever since I stumbled upon it months ago. CSS was never really a problem for me, in and of itself, but I was intrigued by the idea of using variables to create something along the lines of a color palette for my websites and themes. Having a color palette with a fixed number of options to choose from helps prevent me from going color crazy and deviating from a chosen style.

As it turns out, LESS — and Sass for that matter — are so much more than that. LESS and Sass share a lot of similarities in syntax, including the following:

  • Mixins – Classes for classes.
  • Parametric mixins – Classes to which you can pass parameters, like functions.
  • Nested Rules – Classes within classes, which cut down on repetitive code.
  • Operations – Math within CSS.
  • Color functions – Edit your colors.
  • Namespaces – Groups of styles that can be called by references.
  • Scope – Make local changes to styles.
  • JavaScript evaluation – JavaScript expressions evaluated in CSS.

The main difference between LESS and Sass is the way in which they are processed. LESS is a JavaScript library and is, therefore, processed client-side.

Sass, on the other hand, runs on Ruby and is processed server-side. A lot of developers might not choose LESS because of the additional time needed for the JavaScript engine to process the code and output the modified CSS to the browser. There are a few ways around this. The way I get around it is to use LESS only during the development process. Once I’m finished, I copy and paste the LESS output into a minifier and then into a separate CSS file to be included in place of the LESS files. Another option is to use LESS.app2 to compile and minify your LESS files. Both options will minimize the footprint of your styles, as well as avoid any problems that might result from the client’s browser not running JavaScript. While this is not likely, it’s always a possibility.

Update: The statement above has caused quite a heated discussion and debate in comments and on Twitter. Please also consider the reply by Adam Stacoviak: “The reality is that Sass does require Ruby, however it does not need to be compiled to CSS on the server. It can be compiled locally (just as LESS has mentioned for itself) and the compiled CSS can be shipped with your project, WordPress theme, Expression Engine template, or whatever to the server just like your previous CSS files. Since this is Smashing Magazine and the readership could vary dramatically, I would guess that a large portion of you reading this comment are running a Mac. Well, Ruby is provided by default on all Macs so getting Sass installed and running is just a command away (sudo gem install sass).

Once you have Sass installed you can compile Sass locally into CSS and ship the code with your project as I mentioned. If you’re unsure on how to get started with Sass (or Compass) we’ve written a fairly thorough guide on the matter titled, “Getting Started with Sass and Compass3”. Thanks for clearing it up, Adam!

LESS Is More Link

Installation Link

Including LESS in something that you’re building is about as easy as it gets:

  1. Go get yourself a copy of less.js;
  2. Create a file to put your styles in, such as style.less;
  3. Add the following code to your HTML’s <head>:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Note the rel attribute of the link. You are required to append the /less to the end of the value in order for LESS to work. You are also required to include the script immediately after the link to the style sheet. If you’re using HTML5 syntax, and I can’t imagine why you wouldn’t be, you can leave out the type="text/css" and the type="text/javascript".

There’s also a server-side version of LESS4. The easiest way to install LESS on the server is with Node Package Manager5 (NPM).

Variables Link

If you’re a developer, variables are one of your best friends. In the event that you’ll be using information repeatedly (in this case, a color), setting it to a variable makes sense. This way, you guarantee yourself consistency and probably less scrolling about looking for a hex value to copy and paste. You can even do some fun little adding and subtracting of hex values that you want to render. Take this example:

@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;

If we apply these styles to three divs, we can see the gradated effect created by adding and subtracting the hex values to and from the original blue:

A screenshot illustrating the transition from 3 shades of blue
The transition from @light_blue to @blue to @dark_blue.

The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.

Mixins Link

On occasion, we might create a style that’s intended to be used repeatedly throughout the style sheet. Nothing is stopping you from applying multiple classes to the elements in the HTML, but you could also do this without ever leaving your style sheet, using LESS. To illustrate this, I have pasted some sample code that one might use to style two elements on the page.

.border {
border-top: 1px dotted #333;
} {
background: #eee;
} {
background: #ccc;

This will give you something similar to what you would get if you had gone back to the HTML file and added the .bordered class to the two elements there — except you’ve done it without leaving the style sheet. And it works just as well:

A screenshot illustrating two elements that share a border style
Both the article and the unordered list share the border style.

With Sass, you declare @mixin prior to the style to identify it as a mixin. Later, you declare @include to call it.

@mixin border {
border-top: 1px dotted #333;
} {
background: #eee;
@include border;
} {
background: #ccc;
@include border;

Parametric Mixins Link

Like having functions in your CSS (*swoon*), these can be immensely useful for those seemingly redundant tasks of modern-day CSS. The best and most useful example of their use relates to the many vendor prefixes that we struggle with during this transition from CSS2 to CSS3. Nettuts+ has a wonderful webcast and article6 by Jeffrey Way, with details on including a file consisting entirely of useful parametric mixins that cover most of your favorite CSS3 properties in the respective vendor prefixes. For example, a simple mixin to handle rounded corners in their various forms:

.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;

In this case, the .border-radius class has a default radius of 3 pixels, but you can pass whatever value you like to get a rounded corner of that radius. Something like .border-radius(10px) will round the corners by 10 pixels.

The syntax in Sass is very similar to that of LESS. Just use the $ for variables, and call the mixins with the @mixin and @include method mentioned earlier.

Selector Inheritance Link

Here’s something not provided in LESS. With this ability, you can append a selector to a previously established selector without the need to add it in a comma-separated format.

.menu {
    border: 1px solid #ddd;

.footer {
    @extend .menu;

/* will render like so: */
.menu, .footer {
    border: 1px solid #ddd;

Nested Rules Link

Nesting classes and ids in CSS can be one of the only methods to keep your styles from interfering with and from being interfered with any other styles that may be added along the way. But this can get very messy. Using a selector like #site-body .post .post-header h2 is unappealing and takes up a lot of unnecessary space. With LESS, you can nest ids, classes and elements as you go. Using the example above, you could do something like this:

#site-body { …

    .post { …

        .post-header { …

            h2 { … }

            a { …

                &:visited { … }
                &:hover { … }

The above code is essentially the same as the ugly selector in the previous paragraph, but it’s much easier to read and understand, and it takes up much less space. You can also refer in element styles to their pseudo-elements by using the &, which in this case functions similar to this in JavaScript.

Operations Link

This is about what you would expect: using fixed numbers or variables to perform mathematical operations in your styles.

@base_margin: 10px;
@double_margin: @base_margin * 2;

@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

For the record, I am aware that I could have also divided by four to get the @quarter_page variable, but I wanted to illustrate that the parentheses rule from the “order of operations” also applies. Parentheses are also required if you’re going to perform operations within compound properties; for example, border: (@width / 2) solid #000.

Sass is a lot more versatile with numbers than LESS. It has built into it conversion tables to combine comparable units. Sass can work with unrecognized units of measurement and print them out. This feature was apparently introduced in an attempt to future-proof the library against changes made by the W3C.

/* Sass */
2in + 3cm + 2pc = 3.514in

/* LESS */
2in + 3cm + 2pc = Error

Color Functions Link

Earlier, I mentioned how LESS helps me stick to a color scheme in my coding process. One of the parts that contributes to this the most is the color function. Suppose you use a standard blue throughout your styles, and you want to use this color for a gradated “Submit” button in a form. You could go into Photoshop or another editor to get the hex value for a slightly lighter or darker shade than the blue for the gradient. Or you could just use a color function in LESS.

@blue: #369;

.submit {
    padding: 5px 10px;
    border: 1px solid @blue;
    background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
    background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
    background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/
    background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
    background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);

The lighten function literally lightens the color by a percentage value. In this case, it will lighten the base blue by 10%. This method enables us to change the color of gradated elements and any other elements with that color simply by changing the base color itself. This could prove immensely helpful in theming. Plus, if you used a parametric function, like the ones listed above, you could alleviate some of that browser-prefix tedium with something as simple as .linear-gradient(lighten(@blue), @blue, 100%);.

Either way, you get an effect that’s rather nice:

Screenshot of a styled submit button
Our nicely gradated, variable-based “Submit” button.

There are a lot of other color functions for darkening and saturating colors and even spinning the color wheel to other colors. I recommend trying them out to see what you can come up with.

Sass seems to have a lot more color options — not that I would need them all. Lighten and darken are the only ones that I see myself using often. For more detail, Nex3 has an in-depth article on the topic.

Conditionals and Control Link

This is rather nifty, and another thing not provided by LESS. With Sass, you have the ability to use if { } else { } conditional statements, as well as for { } loops. It supports and, or and not, as well as the <, >, <=, >= and == operators.

/* Sample Sass "if" statement */
@if lightness($color) > 30% {
  background-color: #000;
} @else {
  background-color: #fff;

/* Sample Sass "for" loop */
@for $i from 1px to 10px {
  .border-#{i} {
    border: $i solid blue;

Namespaces Link

Namespaces can be used to add another level of organization to our CSS, by allowing us to create groups of commonly used styles and then pick from them along the way. For instance, if we created a group of styles called defaults, we could pull from this group when we come across an element that needs it.

#defaults {
    .nav_list () {
        list-style: none;
        margin: 0; padding: 0;
    .button () { … }
    .quote () { … }

Later, in our code, if we come across a ul element within a nav element, we would know that we’ll need our default style. So, we can simply call it, and it will be applied.

nav ul {
    #defaults > .nav_list;

Scope Link

Scoping is standard throughout programming and thus standard in LESS. If you define a variable at the root level of your style sheet, it will be available and consistent throughout the document. If, however, you redefine the variable from within a selector such as an id or class, then it will be available — with the new value — only within that selector.

@color: #00c; /* blue */

#header {
    @color: #c00; /* red */

    border: 1px solid @color; /* will have a red border */

#footer {
    border: 1px solid @color; /* will have a blue border */

Because we’ve restated the variable within the #header selector, the value for that variable will be different and will apply only within that selector. Anything before or after it will retain the value of the original statement.

Scope is handled a little differently in Sass. In the above code, when the @color variable is changed to red, it will be interpreted as such from that point on within the code.

Comments Link

This part is pretty basic. Two types of comments are valid in LESS. The standard CSS comment, /* comment */, is valid and will get passed through the processing and outputted. Single-line comments, // comment, work as well but will not get passed and outputted and, as a result, are “silent.”

Importing Link

Importing is pretty standard, too. The standard @import: 'classes.less'; works just fine. If, however, you’re importing another LESS file, then the file extension is optional, so @import 'classes'; would work as well. If you want to import something without LESS processing it, you can use the .css extension (for example, @import: 'reset.css';).

String Interpolation Link

String values can also be used in variables and called within styles via @{name}.

@base_url = '';
background-image: url("@{base_url}/images/background.png");

Escaping Link

There will be times when you need to include a value that is not valid CSS syntax or that LESS doesn’t recognize. More often than not, it will be some crazy Microsoft hack. To avoid throwing errors and breaking LESS, you will need to escape them.

.class {
    filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";

/* Will actually be outputted like this: */
.class {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);

JavaScript Evaluation Link

This is one of my favorite parts of LESS: using Javascript in style sheets — simply brilliant. You can use expressions and also reference aspects of the environment using backticks.

@string: `'howdy'.toUpperCase()`; /* @string becomes 'HOWDY' */

/* You can also use the previously mentioned interpolation: */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* becomes 'HOWDY' */

/* Here we access part of the document */
@height = `document.body.clientHeight`;

Output Formatting Link

Whereas LESS has no output settings, Sass provides four output versions: nested, compact, compressed and expanded.

Final Thoughts Link

These two libraries share a lot of basics. Both of them are fantastic tools for designers who code, and they can also help developers work more efficiently and quickly. If you’re a fan of Ruby or HAML, then Sass might be right up your ally. For me, being a PHP and JavaScript geek, I tend to lean towards LESS for its ease of inclusion and access to JavaScript’s expressions and document attributes. I doubt that I’ve even come close to truly grasping the possibilities of programming in my style sheets, but I am intent on trying. If you’ve been using either, or both, of these in your work, I’d love to hear more about it and see some of your results. Tips, tricks and corrections are, of course, always welcome as well.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6

↑ Back to top Tweet itShare on Facebook


Jeremy is a Front End Developer at Papercut Interactive and has a personal blog and portfolio. He is a reader of fiction, watcher of educational television, generally loud-mouthed and opinionated person.

  1. 1

    Robert Stringer

    September 9, 2011 2:09 am

    I’ve been using SASS for a couple of months now. When implemented correctly, you can create a really versatile boilerplate for just about any site. The key here is to think modularly. What reusable code can you deploy for your next project?

    Responsive grids and tried and tested form elements can quickly be introduced, you can be prototyping within minutes, based on your own code base. It really is fantastic.

    Variables alone make it worth introducing to your workflow – declare brand colors once and don’t worry about having to use a color picker again.

  2. 2

    LESS.js is actually a new(ish) addition I think, the client side processing is completely optional as LESS was originally a ruby tool just the same as SASS but now also has Javasctipt, Ruby and PHP compilers.

  3. 3

    Nice article but you forgot one important thing, you can use Less on the server side with the help of Lessphp ( call the class, call your less file, it will process it and output a nice css file ready for your browser to interpret. As a nice feature, the less file is processed only if it’s been changed since the last creation of the css file (providing a cache feature).

    @Kaelig: in order to go through this, you can import a variable file where you have some parametric mixins that do the job for you. Here is simple example:
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    with such a mixin you can have a definition like this:
    .myStyle {border:1px solid #red; .rounded;}
    => it will provide the border-radius syntax for the three browser families in a breeze (with default radix of 5px). If you want to have a different radix:
    .myOtherStyle {border:1px solid blue; .rounded(10px;);}

    I have a file that provides many mixins like this one, sometimes quite complex but it’s not yet “public”. Have an eye to LessElements (, that uses this principle.

    Available for more.

    • 4

      less PHP unfortunately does not exactly the same as less.js. and has some bugs.
      For example namespace mixins (#gradient > .horizontal) from twitter Bootstrap generates “empty” definitions and won’be mixed in your actual selectors.

      #font .shorthand(@weight: normal, #font $size: 14px, #font $lineHeight: 20px) {

      If anyone knows how to fix that I’d be interested to hear your solution!

      • 5

        The problem there is not he mixin. Lessphp does support that normally.

        You need to use “;” to separate arguments in lessphp, not “,”.
        This is a conceptual flaw in LESS that lessphp tried to fix.

  4. 6

    As Kaelig stated, SASS has Compass ( That is a critical advantage.

  5. 7

    Just be careful with heavy nesting in LESS has it can produce very unoptimised CSS, with many selectors.

    remember CSS selectors should be as short as possible and as precise as possible.

    Also, less on server side has a -x option to output minified CSS

    • 8

      This applies to SASS as well. Lots of nesting tends to produce overly-specific JS with long selectors.

  6. 9

    Joel Sutherland

    September 9, 2011 5:18 am

    LESS is really great. Our whole company uses it and we even embedded it into the CMS we released ( This makes the administrative overhead of using LESS non-existant so there is no reason not to use it.

    Our editor is web-based (using Ace) and you can include css like this:

    {% css ‘reset.css,lessfile.less’ min %}

    You can have as many files as you want there. In less files, you can even @import. Every time you save one of the referenced files (or @imported files) everything is processed by less, minified and compiled. This makes development a breeze.

  7. 10

    Thanks for the comparison between the two. Both aren’t really good with CSS3, sprites and all that really verbose & prefixed stuff.

    That’s where Compass comes in handy.

    Maybe when LESS has a companion like Compass for Sass, it will become as powerful as Sass.

    • 11

      agree.. LESS doesn’t have Compass. it extends SASS with popular css frameworks (blueprint & and all those cool CSS3 are built-in as ready-to-use mixins.

      there’s also a plugin architecture to add your own stuff and a ruby script to automatically generate base files for your project.

      now, go check it out!

    • 12

      LESS is just fine with CSS3, you just need to set up a default set of mixins first (there’s loads of examples available out there already).

    • 13

      You can use for basic CSS3 mixins or the preboot.less file from twitter Bootstrap.

    • 14

      There are several mixin libraries for less that are comparable to Compass. I wrote one myself:

    • 15

      Scott Kellum

      May 3, 2012 6:36 am

      LESS still doesn’t have robust control directives, extend, custom functions, as well as silent selectors that are in the Sass beta releases.

      • 16

        Why would you need silent selectors? I hear a lot of excitement about Sass’s features, but I don’t see anything being achieved with them that makes me think I have to use it.

  8. 17

    Does anyone know if there is some kind of ‘less plugin’ for firebug?
    The linenumbers are incorrect when using less while debugging with firebug…
    The linenumbers doesn’t match the stylesheet file.

    Anyone knows a good solution for that?

    • 18

      Hey Dennis,
      It’s because what you’re seeing in Firebug is the output of LESS, which is actually a <style> element that’s added into the page immediately after the LESS script itself. It’s easier to rely on your selectors to find the code in the LESS stylesheet than the line numbers in the output style.

    • 19

      That’s one downside that I haven’t been able to find a good solution for. It does take you a bit longer to find things you need to edit using LESS.

    • 20

      The LessPHP site has a demo that I use as a means to debug when I can’t find out what is going on. It will parse until it hits a roadblock, so you’ll know exactly where the snag is. Another trick, if my stylesheet is still short and sweet, is just appending an extra closing bracket to the end and then using what happens to the page to troubleshoot it.

      • 21

        Zain Shaikh

        July 3, 2013 12:19 pm

        there should be source-map support with LESS and Saas for easy debugging.

  9. 22

    I use LESS aswell; And i compile it with PHP, which checks wether the target *.css-file exists and if it’s newer than the less-file. So if the less-file doesn’t change, the target *.css-file will not change!
    Only “problem” – If one imported less-file in the “main-less-file” is changed, but the less file checked for compilation isnt, the script won’t write a new target *.css-file.. So you only use one less-file without imports or you have to delete the target *.css-file in this situation.

  10. 23

    Awesome stuff here. I love the variables and the color functions … Can’t tell you how much scrolling that will save!

    Nice work!

    • 24

      Dominique Briggs

      September 9, 2011 4:11 am

      Yeh, I even trimmed the original mixin to save space here in the comments but as you can image lot’s of output! Quite happy I didn’t have to write it all by hand :)

  11. 25

    Thanks for this,
    I’ve been meaning to get around to dirty my hands with either of these for over 1 year. Will implement on next project for sure.

  12. 26

    Great article thanks! You may have just converted me ;)

  13. 27

    Stephen Johnson

    September 9, 2011 5:53 am

    You mention early in your article that you like to use LESS for development and then use the minified css output in production. It doesn’t seem like that would mix well with the javascript example at the end of your article:

    “7 /* Here we access part of the document */
    8 @height = `document.body.clientHeight`;”

    • 28

      True enough. I’ve not yet had a project that required me to use JavaScript evaluation in my styles. In that case I suppose you could always compress the values that don’t depend on the evaluation to minimize the script footprint.

  14. 29

    Henry Allen-Tilford

    September 9, 2011 7:00 am

    You should also checkout stylus if you haven’t it’s yet another language that compiles to css. It’s written for use with Node.js and it has a very clean syntax.

    • 30

      I couldn’t agree more. Stylus is AWESOME. I use it in all my projects, both node.js based ones and Java based ones.

  15. 31

    For performance, I simply use lessPHP

    In production, website simply use cached CSS file (a single if does the job), but in development, if debug > 0 or logged in user is admin, PHP regenerates and compress LESS file, each time page gets loaded.

    Also you can create Apache handler for less with PHP, so each time you start new project, just create style.less – and it JUST WORKS ;)

  16. 32

    I’ve never been fond of relying on JS for the interpolation of LESS on the client side. So when I discovered the for OSX ( I was overjoyed!
    It will automatically convert `.less` files into `.css` before you even upload to the server. Brilliant!

  17. 33

    You can integrate both (less & sass) into your project using build or runtime solution using wro4j (

  18. 34

    Ian Storm Taylor

    September 9, 2011 8:35 am

    The only thing that matters is that development on LESS is pretty much dead. Whereas SASS/SCSS has a really active group of devs.

    So do you want to use tool that won’t get updated when bugs are found? or one with a bunch of people working to update it still?

    Really simple. Quit advocating LESS please.

    • 35

      What a shame. It’s such an easy library to implement.

      Feel free to look at this as more of an introduction to CSS frameworks. Most aspects of the two are very similar with a few syntactical differences aside. That might make it a little easier to accept.

    • 36

      Development on LESS isn’t dead at all. It just moved from Ruby to JavaScript.

    • 37

      LESS is now in JavaScript, allowing it to run all over the place. For me it’s a lot easier to swallow requirement than Ruby. There are PHP and .NET ports of it, as well as being able to run inside of Rhino, making it easy to compile LESS in Java and Java Builds.

      It was updated two days ago, what makes you think it’s dead? It may be freed from it’s Ruby requirement, but I think the JS variant is alive and prospering.

    • 38

      I totally agree… There’s a fad with SM with LESS, seems like they want to push it down everyones throat…

  19. 39

    Are there any realtime-browser-updating apps out there that can parse either Less or Sass?

    I can’t imagine not using CSSEdit to blast through a layout, and its clueless on writing and editing in either of these languages.

    We discuss this more here.

    • 40

      Zach Shallbetter

      May 14, 2012 9:41 am and Codekit perform realtime browser updating as well.

    • 41

      LiveReload for mac can do this. Know it’s 2 years later, but worth mentioning in case anyone reading this article isn’t familiar (still one of the top results if you google SASS vs SCSS– unfortunately this just made matters worse for me)

  20. 42

    @Ian Storm Taylor: Your definition of a “dead” project is interesting, because as of this moment, the most recent commit on the SASS project is only one day newer than that of LESS.

    Haters gotta hate. =)


↑ Back to top