An Introduction To LESS, And Comparison To Sass

Advertisement

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

Installation

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

  1. Go get yourself a copy of less.js4;
  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 LESS5. The easiest way to install LESS on the server is with Node Package Manager6 (NPM).

Variables

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

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;
}

article.post {
background: #eee;
.border;
}

ul.menu {
background: #ccc;
.border;
}

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;
}

article.post {
background: #eee;
@include border;
}

ul.menu {
background: #ccc;
@include border;
}

Parametric Mixins

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 article7 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

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

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

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

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 topic8.

Conditionals and Control

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

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

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

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

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

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

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

Escaping

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

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

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

Final Thoughts

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.

(al)

Footnotes

  1. 1 http://lesscss.org/
  2. 2 http://incident57.com/less/
  3. 3 http://thesassway.com/beginner/getting-started-with-sass-and-compass
  4. 4 http://lesscss.googlecode.com/files/less-1.1.3.min.js
  5. 5 http://lesscss.org/#-server-side-usage
  6. 6 http://github.com/isaacs/npm
  7. 7 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-never-type-a-vendor-prefix-again/
  8. 8 http://nex-3.com/posts/89-powerful-color-manipulation-with-Sass

↑ Back to topShare on Twitter

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.

Advertising
  1. 1

    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.

    0
    • 2

      agree.. LESS doesn’t have Compass. it extends SASS with popular css frameworks (blueprint & 960.gs) 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! http://compass-style.org/

      0
    • 3

      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).

      0
    • 4

      You can use http://lesselements.com/ for basic CSS3 mixins or the preboot.less file from twitter Bootstrap.

      0
    • 5

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

      https://github.com/jdmiller82/-lessins-

      0
    • 6

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

      0
      • 7

        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.

        1
  2. 8

    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.

    0
  3. 9

    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.

    0
  4. 10

    Nice article but you forgot one important thing, you can use Less on the server side with the help of Lessphp (http://leafo.net/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:
    @defaultRadius:5px;
    .rounded(@radius:@defaultRadius;){
    -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 (http://lesselements.com/), that uses this principle.

    Available for more.

    0
    • 11

      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) {
      font-size:;
      font-weight:;
      line-height:;
      }

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

      0
      • 12

        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.

        0
  5. 13

    As Kaelig stated, SASS has Compass (http://compass-style.org/). That is a critical advantage.

    0
  6. 14

    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

    0
    • 15

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

      0
  7. 16

    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?

    0
    • 17

      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.

      0
    • 18

      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.

      0
    • 19

      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.

      0
  8. 21

    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.

    0
  9. 22

    I used Sass recently for a Buddhist Centre website (http://www.jamyang.co.uk/test/jamyang/ (not live yet)) and asked myself why CSS wasn’t like this in the first place! Nesting etc, it all makes sense.

    The ability to perform operations, declare variables and mixins really helped with producing the alternative styles on each page of the website. Example below:

    @mixin body_colour($colour, $page) {

    body.#{$page} {

    #navigation-bg {
    background: $colour;
    }
    #navigation {

    a.#{$page} {
    color: $colour;
    border-bottom:0px;
    background:#fff;
    height: $nav_height – ($nav_padding * 2) + $nav_border_size;
    font-weight:bold;
    position:relative;
    }
    }
    }

    Then used the mixin for every page variation will page colours declared at the top of the style sheet:

    /*– Run mixin classes to print out page style variation colour scheme on navigation –*/
    @include body_colour($home_colour, home);
    @include body_colour($about_colour, about);
    @include body_colour($meditation_colour, meditation);
    @include body_colour($buddhism_colour, buddhism);
    @include body_colour($news_colour, news);
    @include body_colour($what_colour, what);
    @include body_colour($facilities_colour, facilities);
    @include body_colour($services_colour, services);
    @include body_colour($multimedia_colour, multimedia);
    @include body_colour($community_colour, community);
    @include body_colour($contact_colour, contact);

    Using Less for current project so I can pull some things from the Twitter bootstrap. ;-)

    0
  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!

    0
    • 24

      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 :)

      0
  11. 25

    Nicely timed article. I just recently (today actually) started working on converting Twitter’s Bootstrap (1, 2) from LESS to SCSS (SASS alternative syntax) which opened my eyes to LESS once more.

    The two most appealing _advantages_ over SASS, to me, that I noticed these last few hours is the nesting of mixins and the cleaner syntax (less writing). At the moment I think SASS is still more flexible but I rarely need that, so I might start using LESS for all my small projects and keep using SASS at work.

    1: http://twitter.github.com/bootstrap/
    2: https://github.com/teddyzetterlund/twitter-bootstrap-scss

    0
  12. 26

    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.

    0
  13. 27

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

    0
  14. 28

    LESS is really great. Our whole company uses it and we even embedded it into the CMS we released (http://www.gethifi.com). 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.

    0
  15. 29

    Great article. Less seems to be everywhere at the moment.

    Spent the week playing with it and wrote this post tonight for people that are trying to work out how to use the server side less.js with wordpress on a server.

    Using Less.js with WordPress

    0
  16. 30

    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`;”

    0
    • 31

      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.

      0
  17. 32

    Henry Allen-Tilford

    September 9, 2011 7:00 am

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

    0
    • 33

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

      0
  18. 34

    For performance, I simply use lessPHP http://leafo.net/lessphp/docs/

    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 ;)

    0
  19. 35

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

    0
  20. 36

    You can integrate both (less & sass) into your project using build or runtime solution using wro4j (http://alexo.github.com/wro4j)

    0
  21. 37

    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.

    0
    • 38

      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.

      0
    • 39

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

      0
    • 40

      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.

      0
    • 41

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

      0
  22. 42

    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.

    0
    • 43

      Zach Shallbetter

      May 14, 2012 9:41 am

      Less.app and Codekit perform realtime browser updating as well.

      0
    • 44

      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)

      0
  23. 45

    @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. =)

    0
  24. 46

    Interesting – I’ve never heard of LESS or SASS.

    I actually was pretty annoyed by the lack of variables in CSS recently, so I wrote a node.js module that allowed you to create variables – I called it Advanced Style Sheets (yes, that’s ASS).

    I suppose it’s useless if this LESS thing is catching on, but here’s the link if you are interested. https://github.com/josephwegner/node-ass

    0
  25. 47

    So…With LESS, if JS is disabled, your styles will not render properly?

    I know there are very few people with JS disabled but that still makes me uneasy.

    0
    • 48

      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.app 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.

      Just compile it and you don’t have to worry about the users that might not have JavaScript enabled.

      0
      • 49

        That’s good to know. This all seems like a lot of extra work though. The article gave me a better understanding of LESS & SASS but I’m not convinced I personally need it.

        I also wonder how counter-productive it may be in a working environment. Say your company codes in LESS, but you need to hire a freelancer on a short deadline who has never used LESS or SASS before.

        Or vice versa: The freelancer uses SASS and when the assets are handed off to the agency or web shop, the fulltime coder isn’t familiar with how it was coded, possibly having to re-write everything.

        0
        • 50

          look at it as another tool you can use – you don’t have to use either if it doesn’t come across your needs

          0
        • 51

          The extra work for compiling literally amounts to less than a minute.

          As for coders having to learn it, that should take 10 minutes – at most. In my first hour of using it, it saved me more time than learning it had cost me.

          0
    • 52

      Using javascript version in development and after everythings ready, just run it through node.js / rhino / etc.

      And just switch to regular .css no harm done.

      0
  26. 53

    Thanks, for that really interesting article, i am currently using less with the amazing less.app (available only on mac) which just make the whole javascript process obsolete as it compile your .less file to a .css file every time you save your work.
    But after reading all those comments, i really am going to take a deeper look at Sass and Compass.
    Thanks

    0
  27. 54

    you mean SASS > LESS ;)

    0
  28. 55

    If you are a SASS user you should check out Thoughtbot’s Bourbon: https://github.com/thoughtbot/bourbon … it is a real time saver for a lot of CSS3 stuff.

    0
  29. 56

    I’m not sure I’m going to use either LESS o SASS any soon but you definitely have some good points here. Thanks for sharing :)

    Choosing color definitely drives me crazy all the times lol

    0
  30. 57

    In regard to LESS being “slower” clientside it’s worth mentioning that browsers supporting “localStorage” (approx. 84% according to – http://caniuse.com/namevalue-storage) after the 1st compile clientside the resulting CSS is cached in localStorage. This apparently puts it “close to on-par” with normal CSS cache’ed files… (I would love to see some benchmarking on this… but it sounds good enough in theory).

    Dependency on JavaScript does not have to be an issue… You can pre-compile and minify for production. However in production you may still be compiling clientside if you’re tapping into JavaScript Evaluation… you should consider 3 LESS files in this senario … base.less, base.defaults.less, base.variable.less – the latter two define variables at the top of the file (“defaults” has hardcoded values, and “variable” has JS evaluated variables). They both @import “base.less” after the variables are defined. You can pre-compile “base.defaults.less” into CSS and clientside compile “base.variable.less” for dynamic behaviour. When JavaScript is not enabled you fallback via basic.defaults.css ( is allowed in the HEAD element with the HTML5 doctype)… FYI I’m playing with these ideas in BOSS.js – https://github.com/chrisjacob/BOSS.js

    The barriers to adopting LESS seem much lower then SASS; and for that reason alone I believe it’s got a promising future. + Twitter’s “Bootstrap.less” gives LESS plenty of street cred & is a great resource to learn from http://twitter.github.com/bootstrap/.

    When it comes to “passing over LESS to another dev”… LESS’s syntax I feel is very intuitive – so it really shouldn’t be to hard to figure out. But the major difference when passing over LESS is that it CAN be compiled in the browser (… no doubt someone’s working on a web app / browser extension to capitalize on this) + it’s VERY easy using LESS.app for Mac OSX…and if all else fails the dev can ditch LESS and continue on with the CSS (not ideal – but hey you’ve handed over the project so meh).

    0
  31. 58

    I have been using SASS for the better part of two and a half years. For a project I had to learn LESS as well and even went as far as to create a UI Framework in LESS (http://goo.gl/K98VJ). This was eye opening and really made me rethink that relationship between SASS, Compass and Ruby. The great thing I realized is that SASS is not only for Ruby devs. Anyone can and should use SASS.

    Having done this, I can definitely say that LESS < SASS. LESS is simple by design and as far as I understand Alexis intendes on keeping that way.

    "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." Ahhhh ………

    On the surface that may appear to be true, but if you actually dig deep into the features of SASS versus LESS, you will discover that there is a much greater divide.

    LESS.js, while this solution may be acceptable for intro users and smaller brochure sites, this won't work for professional high traffic sites. The run time to process all that LESS and then shove that into a tag in the header of each doc ….. bad.

    Another significant difference between LESS and SASS is trouble shooting. There is no support in LESS to speak of. If you are using complex mixins and other powertools and you bork the code, your site will just not render. This is a real headache if you are using a complex file structure.

    SASS on the other had there is output directly in the view of your browser that will tell what you did wrong and where. That is HUGE!!

    LESS.app is a great tool to pre-compile, but it only runs on Macs and that is a turn off for many developers. One thing that LESS.app does have is the bug reporting that LESS.js does not. At least that makes it easier to trouble shoot.

    Scout (http://goo.gl/a2lI5) is a similare application for SASS and runs on Mac and WIndows.

    Compass is a huge asset to SASS, but it is not its only asset. Chris has done amazing things that have helped mature SASS and really illustrate the power of SASS. But like all great languages that push the envelope on the status que, SASS without Compass is equally as powerful.

    0
  32. 60

    Anders Schmidt Hansen

    September 10, 2011 1:11 pm

    Great article! I’ve been using LESS.js for quite some time now and it really saves me a lot of hassle. Another great thing about the OOP-thoughts going on with both SASS and LESS is that it really benifits designers who also want to share their code with others. Especially LESS.js makes this a breeze if you take advantage of @import and create different style libraries. Suddenly CSS becomes extremely modular and much much more straightforward.

    0
  33. 61

    this is a nice introduction to some css knowledge :) really appreciate you sharing this, jeremy. really really nice and essential

    0
  34. 62

    Its awesome…. But why doesn’t it support in Chrome…. Can anybody help….

    0
  35. 66

    “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.”

    LESS.js is just a new addition to LESS.
    There are parsers available in php and probably other langs too for both of them.

    I don’t see a javascript implementation of LESS to be that big of an advantage. It’s not wise to use it in production; and as already mentioned in the article, you should minify the compiled version into a css file to make it usable for the end-user.

    Sass already does that, and it does it much better. Sass has a “watch” function that watches all the .scss (or .sass) files in the project directory for changes and as soon as one gets updated, it recompiles the output. The good thing is, if you have done your code in a modular way and different parts of your code reside in different .scss files, only the updated files get re-parsed. So, the output generation is really fast. You simply make a change tn the new file, save it, and hit F9 in your browser to see the change.
    For one of my projects with more than 100 .scss files each with a lot of code and conditionals, and with multiple .css outputs for different locales, all of them get produced in about a second. (Sass also has something a little similar to php’s opcode caching)

    Another advantage of Sass over LESS is the compass framework. It adds lots of features that simply aren’t doable in client side javascript.
    Automatic sprites are one of them. Take a look:

    @import “icon/*.png”;

    .actions {
    .new { @include icon-sprite(new); } //means icons/new.png, but only it’s position in the generated sprite
    .edit { @include icon-sprite(edit); }
    .save { @include icon-sprite(save); }
    .delete { @include icon-sprite(delete); }
    }

    This code finds all png images in the “icons” directory, puts them all in a sprite image, and makes them available to the rest of the code. More sprite features are explained here: http://compass-style.org/help/tutorials/spriting/

    Another feature worth mentioning here is image-dimensions. This is pretty self explanatory:
    $image: “./image.png”;
    width: image-width($image);

    I was a LESS user just a few months ago. Back then, the “&” operator wasn’t implemented in it yet. So I moved to SCSS (Sass). It took me like 15 minutes to convert a big LESS project into scss and since then, I have never looked back.

    0
  36. 67

    If you’re using Dreamweaver, you can download a free extension that will compile .less files into pure CSS — So no client side processing is required :)

    http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2692522

    0
    • 68

      Thanks for that link Simon. I don’t use Dreamweaver any more but I used to. That extension could be quite useful.

      0
  37. 69

    Turbine is also a great solution for things like this, and waaay easyer in use.

    0
  38. 70

    I use it to because of the variables and calculations that I can do with it

    0
  39. 71

    Hey all, I’m the Editor in Chief for The Sass Way (http://thesassway.com/) and I just wanted to add a note for those who read in the first section where it says “Sass, on the other hand, runs on Ruby and is processed server-side.” and thought, well I’m not going to use Sass because I don’t have any idea on how to get Sass or Ruby for that matter on my WordPress or PHP stack server.

    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 Compass”: http://thesassway.com/beginner/getting-started-with-sass-and-compass

    Thanks for reading this comment. I just wanted to clear the air and let you know that Sass is REALLY easy to get setup with and that you DO NOT have to compile your Sass files to CSS on the server as this article might suggest.

    0
  40. 72

    I started out using SASS/Compass but have since moved to LESS. There is a app at least on Mac that works similar to compass. http://incident57.com/less/.

    The main concern in our group was the additional JS that was needed. With the LESS.app the JS is no longer needed.

    0
  41. 73

    The base_url thing, shouldn’t it be : instead of = ?

    @base_url : ‘http://coding.smashingmagazine.com’;

    Also, when I use this example, instead of:
    http://localhost/less/images/test.jpg
    I get:
    http://localhost/less/http://localhost/less/images/test.jpg

    0
    • 74

      You’re absolutely right Jorg, it should be:

      @base_url: ‘http://coding.smashingmagazine.com’;
      background-image: url(“@{base_url}/images/background.png”);

      Thanks for pointing out that mistake.

      0
  42. 75

    If you are looking for good solution of avoiding less.js and rather compile less on server side, you may be interedted in autocompilation on every change of .less file.

    general mistake: LESS has also commandline compiler lessc, just install appropriate gem:

    sudo gem install less

    Works like a charm on *nix systems.

    0
  43. 77

    I’ve written a great mixin library for less that anybody can use:
    https://github.com/jdmiller82/-lessins-

    0
  44. 78

    Hey Guys,

    great article – I’ve got a little ressource for you to add, a friend of mine has been working on a .NET portation of LESS with some of his colleagues, maybe you wanna add the link: http://www.dotlesscss.org/

    cheers,
    K

    0
  45. 79

    After one Year with SASS/Compass i can say its perfect. I got a Box with many features to play around.

    I combine @mixins with @functions and @extend this is very powerfull. Functions you have forgotten in the SASS Feature List. You can write your own Functions when you need one return values.

    With Compass comes another good Featues, fast CSS3 Development and cool Image Operations. Build Sprites, BASE64 and controll Freatures when you implement Images in the SASS Files.

    0
  46. 80

    There’s a great plugin for anyone (not many of you) using Visual Studio called Chirpy which can automatically process LESS for you, perform correctness checks, and minify the output.

    0
  47. 81

    Looking forward to presenting all the details about LESS and Sass today to our team. This is a great run-down of the differences of the two and how they are equally very useful. While I haven’t gotten to try either out on an actual project, doing all the research really gets me excited to try them both out.

    Thanks for your review,
    Katie

    0
  48. 82

    Hi, I have followed the 1st three steps and also have the downloaded the latest files from lesscss.org and github.com, and am trying to use “less” locally without uploading to a server, will this work or how do i make “less” work locally. Please help anyone.

    0
  49. 85

    Hi,

    Is it possible to use the variables (which you set in less) in your php code?

    Regards,

    Lucky

    0
  50. 86

    Your remark on LESS not having selector inheritance is not entirely correct:
    .menu {border: 1px solid #ddd}
    .footer {.menu}

    This is a feature I have been using a lot lately: if you have a good css library, simply rename the file to .less, and you can consider the existing class selectors as mixins, allowing you to bind to your existing html without interfering with it!

    Suppose I have in someLibrary.css, which I rename to someLibrary.less:
    .blue-background{ background: blue}

    Then I can use in my style.less for my page:
    @import “someLibrary”
    body{.blue-background}

    And I didn’t have to add non-semantical classes to my html!

    0
  51. 87

    Alexander Stepanets

    January 25, 2012 8:09 pm

    Thank you for this exellent publication, Jeremy!

    But… ‘topUpperCase()’ in ‘JavaScript Evaluation’ code example should be changed to ‘toUpperCase()’. :)

    0
  52. 88

    Is there any editor out there that supports code hinting for less files? Thx in advance!

    0
    • 89

      Sublime Text 2 has a package you can install for LESS syntax highlighting, although regular CSS syntax highlighting works good enough. Also SimpLESS compiles LESS just like LESS.app but it works on Windows, Linux and Mac!

      0
  53. 90

    Has anybody else encountered this problem with Less?

    Javascript evaluation doesn’t work as described at less.org. Whenever I try to use this;

    @height: `document.body.clientHeight`;

    I get a syntax error with less.js and less.app. This would be so useful for responsive layouts if it worked.

    0
  54. 91

    Nice tutorial.

    Tank’s

    0
  55. 92

    LESS, Sass, Compass are great ways to work with the creation, handling, maintaining and delivery of CSS, but ONLY when either you are the only one touching the code, or your team is right there next to you, locally, working on the project.

    None of these methods work if you’re working with off-shore developers that have no clue about CSS (or basic knowledge), standards and/or best practices or plain and simple don’t want to learn.

    Adding another layer of work in that type of environment is asking for trouble… well, MORE trouble; as it is you already have to deal with the issues I mentioned above.

    Not sure if anyone else has similar issues with off-shore developers, would be great to know.

    0
    • 93

      if you have to write css together with offshore developers that’s ever more pain in your ass, than less/sass

      0
  56. 94

    I’ve known about LESS and SASS for over year now and kept saying to myself “I need to learn one of these” what way more dynamic coding and time saver. Then CSS3 comes along and I need to learn that too. Thankfully for this article I really understand the difference now. The majority of sites I work on are small (less than 25 pages) so the processing shouldn’t be a problem for me. BUT I do like compass and on Chris Eppstein’s blog this is what is winning me over to go with SASS:

    “These days, you only need to write:

    @import “compass”;
    .bg {
    @include background-image(linear-gradient(#fff 20%, #0c0 50%, #000 80%))
    }

    And Compass will still generate the old webkit syntax for your legacy users:

    .bg {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%,
    color-stop(20%, #ffffff), color-stop(50%, #00cc00), color-stop(80%, #000000));
    background-image: -webkit-linear-gradient(#ffffff 20%, #00cc00 50%, #000000 80%);
    background-image: -moz-linear-gradient(#ffffff 20%, #00cc00 50%, #000000 80%);
    background-image: -o-linear-gradient(#ffffff 20%, #00cc00 50%, #000000 80%);
    background-image: -ms-linear-gradient(#ffffff 20%, #00cc00 50%, #000000 80%);
    background-image: linear-gradient(#ffffff 20%, #00cc00 50%, #000000 80%);
    }

    Now I can truly code once and not worry about all those webkits, moz, etc.

    0
    • 95

      Chris Demetriad

      March 10, 2012 6:37 am

      This thing could convince me to go with SASS too.

      On the other hand, I am quite new to LESS/SASS and I think will choose the easiest one for starters, I am still extremely confused what’s best for me.

      Which one is more popular?

      0
      • 96

        i’d recommend you to use compass, cause it’s transparent, documented and production-ready.

        p.s. ans it’s sprite-generation makes my life a lot happier)

        0
  57. 97

    Jeremy, you bad …

    0
  58. 98

    It may be worth noting that LESS can be compiled via Node either on Developer Machine or Production Server.

    0
  59. 99

    Jennifer Hageman

    June 25, 2012 1:06 pm

    I use a LESS tool called Crunch (http://crunchapp.net) and find it incredibly simple and useful.

    The devs have described their app as follows: “Crunch is a LESS editor and compiler. You edit your LESS, then you Crunch it into a CSS file. Then you link said CSS file in your HTML. Then you dance a happy dance.”

    Regardless of what platform you choose, use of a CSS Preprocessor is definitely worth investigating.

    0
  60. 100

    After doing tons of reading on SASS and LESS I think for the small business sites I do I will go with LESS and use SimpLESS to compile directly to .css file… still trying to wrap my head around running it on the server and compile on the fly? can anybody explain a bit more on why ?

    Still very new to this idea :)

    Thanks!
    Baker

    0
  61. 101

    Yes, I prefer LESS too. Plus, SynStar supports LESS:
    http://the-sync-star.com/documentation/less-file-support/
    It is so cool because the LESS file will be automatically compiled, uploaded, and then browser is refreshed!

    0
  62. 102

    Want to point out that in 2013 the Node.js node-sass package allows sass pre-processing without a Ruby dependency.

    0
  63. 103

    good thank u

    0
  64. 104

    Alfonse Surigao

    June 5, 2013 9:24 am

    I use both LESS and Sass for some of my websites. Right now I use Sass more, just because solely for compass and using the Foundation Framework, though I really like LESS for use with Twitter Bootstrap.

    Both are great…it all depends on your taste really. I actually wrote a blog article on this as well.

    0
  65. 105

    Is there any way to use LESS & SASS in the same file, same project ? I mean, I want to use both of them in my project. How to do that ?

    0
  66. 107

    Sass is accompanied not only by Compass, but also by Susy (http://susy.oddbird.net/), Breakpoint (http://breakpoint-sass.com/) and various other tools and libraries. Especially Susy rocks in its new version, it saves us a ton of time when developing new sites and working with different grids. We never tried LESS because Sass gives us all we need and more :) Also, you do not need to be a fan of Ruby to use Sass, in fact you don’t need to know Ruby at all.

    -1
  67. 108

    Hi, I believe it will be cool also to write an article on Less Compilers. Here is a free one for OpenCart: https://isenselabs.com/products/view/lessengine-integrated-less-php-compiler-for-opencart

    0

↑ Back to top