LESS – The Dynamic Stylesheet

You might have heard until now of LESS and you might know it has something to do with CSS and styling websites, but I am quite sure that not many people really know what LESS actually is and why is it so special that it got its own name.

Unlike CSS, LESS is an open-source dynamic stylesheet language, with its first version being written in Ruby, but replaced by JavaScript later on. LESS is more complex than CSS is, providing variables, nesting, mixins (reusable classes), operators and functions and allows real-time compilation via LESS.js by the browser in use. LESS can run on both client- and server-side and can even be compiled into normal, plain CSS.

LESS

Using LESS would allow writing CSS in a programming way instead of static, as CSS is by default.

However cool and simple this might seem, using LESS is clearly more difficult than using plain CSS, simply because it is built on JavaScript and you have to know a little bit of it in order to use it. If this is no problem for you, then using LESS shouldn’t be either.

The fact that you have the option of using all these variables and operations will help you make your code dynamic, so it can become easier to play with it. If you look at code examples from LESS, you will notice that they look similar to plain CSS, so you will not have to learn a whole new stylesheet structure if you want to start using it.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

One of my favourite advantages LESS offers is nesting. In CSS we usually write every rule set separately, one after another, but this often leads to selectors that repeat the same things several times. Styling the navigation is usually a good example, where you have the header, then the nav, nav ul, nav ul li and nav ul li a. In LESS you can nest all these and make it look the following way:

#header {
	#nav {
		ul {
			li {
				a { }
			}
		}
	}
}

Now that’s simple, more effective and helps you whenever you need to find some small variable in a big bunch of code. You don’t have to repeat the same selectors over and over again and you can nest relevant rules inside another to show the hierarchy. Adding pseudo-classes to this nesting structure can easily be done as well by adding the & symbol.

Another one of my favourite features of LESS is that you can easily manage colors throughout a website. When you have a website where you use at least three colors (and you do all the time, sometimes for background, font color, anchor color, hover color and the list can continue) and you have to look for these throughout a 600-line CSS, it will get annoying. “Find and replace” is the only quick solution, but it doesn’t always do the job the way you want it to.

LESS solves this problem by allowing designers to use variables. You can add a color on a variable, for example: @main-color: #333333; and then call the variable wherever you want: #header { background-color: @main-color; }. It doesn’t get simpler than this.

Have you every thought how many lines of code you have to write sometimes (or copy from another place in your code for that matter) only to specify rounded corners, for example? It usually looks like that:

border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

In LESS you can make this even simpler by using mixins. First, we have to write the original mixin and add the variable we want to manipulate:

.border-corners(@radius: 10px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

Now, if you want the header to have a border radius of 5px, we can do the following:

#header {
.border-corners(5px);
}

Again, as simple as it can get. This is what LESS is about, making this easier and quicker.

By using operations, designers can add changes on existing values, for example setting a default margin at 10px and then adding the default margin + another 10px to an element. This will make sure that if you want to modify the default margin of the page, it will affect the whole page as it should, and you won’t have to go back to every margin you have added in your CSS and modify it by hand. This can come in very handy when you know that you might modify paddings or margins later on during the design phase.

LESS can do much more and there is a large number of possible combinations you can make between variables, operations, mixins and so on. LESS can get very complicated if you don’t know how to use it. Many times beginners want to transform everything in the CSS code into LESS, which is wrong, as LESS is based on the CSS structure. This means that simple operations can still be successfully done in CSS. Just because the stylesheet is called less.js, it doesn’t mean everything has to be written in the LESS structure. It can get very messy if you don’t know how to properly use it. Keep in mind you don’t have to nest all your rules and create operations and mixins for everything, and definitely not for things like a simple border color.

Mixins

Basically, preprocessors exist to make CSS code dynamic and allow designers and developers to code in a better way. There are people who simply don’t like plain CSS and the reasoning behind this is quite clear. When you design a blank page with three paragraphs of text on it, CSS should be more than enough. However, when things get more complicated and you have to write hundreds of lines of code, a preprocessor like LESS can make your job easier and get rid of some frustrations for you.

You have to keep in mind that LESS is built on JavaScript, which means that compiling takes place live, so older browsers might be slow to it. It shouldn’t be a problem for newer browser versions though, but keep in mind who is your target and who is going to visit your website.

In case CSS is way too simple for you and you want a bit more dynamic styling, LESS is one of the preprocessing options. The other good one is called Sass and has its advantages, but LESS is a good way to start because it works on the same structure as CSS, so it would be easier for you to learn it.

Have you been using LESS until now? What about Sass? Which one you think it’s better and why?

Christian Vasile is an enthusiastic Romanian web designer currently living in Denmark. You can follow him on Twitter at @christianvasile or visit his web portfolio at christianvasile.com.

Newsletter

34 Comments
  1. Romeo Aug 5, 12:30 pm

    LESS IS MORE. Easy to use and install, I love LESS

    Reply
    +14
  2. Michiel Aug 5, 12:31 pm

    Although less might be harder to apply as just writing plain CSS, I believe it provides a better structure and reduces the clutterness of large CSS files which sometimes have a lot of interdependencies.

    p.s. there is a small spelling mistake: background-color: @mail-color; should be background-color: @main-color;

    Reply
    +4
  3. Alex Aug 5, 12:55 pm

    I believe it’s CSS4

    Reply
    +2
  4. Remy Aug 5, 12:56 pm

    I personnaly prefer SASS, as the live compilation takes too much time IMHO. Even if it means installing the SASS compilator on your development machine, and having to remember to always compile your stylesheet before testing it (I’ve lost a lot of time wondering why my changes didn’t work, when they just weren’t updated in the final CSS file…)

    Reply
    +6
    • Amir Eldor Aug 6, 7:29 am

      There’s another Ruby gem called… I don’t remember now, I think “compass”. It monitors changes to SASS files and recompiles the appropriate files automatically. Should help you avoid the ‘forgot-to-compile’ problem.

      Reply
      +2
      • Remy Aug 6, 12:14 pm

        The SASS gem allows you to watch the file too (sass -w file.scss:file.css), but it’s more when I restart my computer, I have to remember to run this command. But it’s ok, it’s just my empty head…

        Reply
        +1
        • Amir Eldor Aug 6, 1:38 pm

          Does the SASS gem support watching multiple files? When I played around with SASS I remember editing several .sass’s and never worrying about which files I need to recompile.

          Reply
          0
          • Remy Aug 6, 6:16 pm

            sass –watch public/stylesheets/sass:public/stylesheets
            will monitor all .scss files in public/stylesheets/sass and write them out as .css to public/stylesheets/

            +1
    • Karl Merkli Aug 7, 11:03 am

      You can compile it too, you dont have to use it on runtime

      Reply
      +1
  5. Justinas Aug 5, 1:10 pm

    Compilation can be done server-side, as LESS compiler supports node.js and has a CLI frontend. I don’t see how LESS using JavaScript is a disadvantage.

    Reply
    +3
  6. Thijs Aug 5, 2:03 pm

    These apps compile and minify your LESS code to an actual CSS file which can be included in the header of an html document like usual. Much similar to Compass for SASS it actually ‘watches’ the LESS documents and invoke the compilation on any change.

    http://incident57.com/less/ (OSX)
    http://winless.org/ (WINDOWS)

    Reply
    +4
  7. Dave Aug 5, 3:09 pm

    I use LESS almost exclusively, but I’ve never sent a .LESS file down to the browser for compilation on the client. Always use a preprocessor to compile your LESS files as soon as you save them. All platforms have this ability.

    Reply
    +3
  8. Mohanraaj Aug 5, 5:16 pm

    I never used LESS css in my projects, but it looks like time saving one.
    Do i need to have any special initiators or support files???

    Reply
    0
  9. Stephan Lück Aug 5, 5:33 pm

    I prefer Sass/compass

    Reply
    +2
  10. Den Aug 5, 6:11 pm

    Thank you for writing this. Please write more about LESS especially debugging in Firebug or Chrome Developer Tool

    Reply
    +2
  11. Ian Aug 5, 7:42 pm

    I have to say Sass myself. After switching to the indented syntax even writing LESS felt like I was doing way more than I needed to. Why bother with semicolons and brackets? Also, having SCSS under the same banner makes Sass great for beginners as well (superset of css). Nothing against LESS I just feel their competitor is better. It seems like Bootstrap is the real reason LESS has seen such popularity. Foundation, admittedly, just doesn’t look as good.

    Reply
    +2
  12. John Slegers Aug 5, 8:36 pm

    While Sass most definitely has its own issues, I prefer Sass to LESS for the following reasons :

    * Sass allows powerful CSS output optimisations by combining placeholders with extends ( http://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass ). I know of no equivalent technique for LESS.

    * Sass supports if/else and for statements, which allows you to use Sass as a traditional functional programming language. LESS has no equivalent for for statements and its “guarded mixins” are a pretty subpar convoluted alternative to if/else statements.

    * scoping rules in Sass make more sense. Allowing variables to be declared after being used makes me cringe.

    * Sass syntax is more similar to that of a traditional functional programming language. For people with programming experience, Sass is a lot easier to read.

    * LESS is lacking in documentation. For example, extends have been added to version 1.4 but remain undocumented.

    Reply
    +7
  13. Nadler Aug 5, 10:23 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -7
    • Framp Aug 5, 11:57 pm

      I don’t think anyone would deploy a website which compile less on the fly.

      It’s always better to precompile your less files on the server, to avoid having to wait for the browser.

      Reply
      +3
  14. Kariem Aug 5, 10:46 pm

    SASS/COMPASS FTW!!

    Reply
    0
  15. Framp Aug 5, 11:55 pm

    Actually I prefer stylus (+nib)
    It’s much more powerful and has a cleaner syntax.
    Plus, it’s completely optional: you can easily mix its clean syntax with standard css.

    nib is built upon stylus and provide a lot of useful functions (like vendor prefixes, gradients, reset, etc). stylus : nib = sass : compass

    And it’s awesomely integrated with node.js and grunt.
    My usual workflow is something like (warning: backend dev speak)
    – Installing grunt and http-server (npm install -g http-server grunt)
    – Launching http-server in the root directory
    – Writing a Gruntfile which watches for changes in my files, compiles stylus, optimize css files and uglifies js files
    – Launching grunt watch
    – Editing files
    – Refreshing the browser page

    It’s pretty awesome, you should try it!

    Reply
    +2
  16. Mark Aug 6, 12:15 am

    I’m ready to give it a try, but I’d like to know what is the advantage (if any) of using LESS instead of SASS?

    Reply
    0
  17. FlorinC Aug 6, 10:30 am

    I’m using Prepos (http://alphapixels.com/prepros/).
    Prepros compiles LESS, Sass, SCSS, Stylus etc.
    Is free and open source for Windows and OSX.

    Reply
    +4
    • Antoine Guédès Aug 6, 12:23 pm

      +1 with @FlorinC
      After giving a try to a lot of app to compile LESS, I finally found Prepos wich IMO is the best. Updates are often available and it’s becoming even better updates after updates.

      Reply
      +1
  18. Clinton Aug 6, 3:35 pm

    Try a few different pre-processors. For me it’s Prepros all the way!!!! http://alphapixels.com/prepros/

    Reply
    +3
    • Karl Merkli Aug 7, 11:08 am

      the preprocessor is still the same, just another client. So the preprocessor is still less

      Reply
      +1
  19. Stephan Lück Aug 15, 6:36 pm

    I’m beginner with pre-processor but i think for me SASS is easylier to learn instead of Less – without apps.

    And i hope i can found to be.. here at Designmodo a tutorial about it

    Reply
    0
  20. sumit kumar raj Aug 22, 10:44 am

    Why it is named as Less.Is there any full form of this ?

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters