LESS is More

If you’ve been watching the web design community for the past year or two, you’ve probably heard of LESS. Basically, it’s an enhanced style of CSS that lets you build complex CSS faster and easier. Run that file through the LESS program, and with just a dose of 'wiz' and a dash of 'bang,' the result is a normal CSS document that you’re already familiar with. Once you have the hang of it you will never go back. LESS is to CSS, what CSS is to HTML… it's that good.

A little about CSS

CSS stands for Cascading Style Sheets. Style sheets allow us to separate visual presentation instructions from the HTML markup itself. Thanks to this revolution we said goodbye to many, many lines of HTML markup that were placed directly into the DOM structure, and to table layouts… nice!

CSS brought plenty of advantages. For example, before CSS presentation code was…

• Intertwined directly with the page elements and content… messy.
• Repeated multiple times on the same page… redundant.
• Implemented in different ways within the same document and site… inconsistent.

So who's the new kid on the block?

It's LESS. How does it work? LESS allows you to write CSS using nesting, simple variables, and other things that normally aren’t supported. That lets you organize your CSS rules in hierarchies, group things logically, and avoid repeating the same CSS over and over. Then, the LESS script turns the file into normal CSS files for the browser. I say 'LESS is more' because it lets you write less CSS code, while accomplishing more!

I can be a better Drupal Themer

I'm a Drupal front end developer, and what was important to me is how this could improve my Drupal theming. When I decided to commit to using LESS, I was quickly able to see many benefits for my Drupal theming?

LESS improved my Drupal theming process/workflow by allowing me to…

• create reusable css structures that speed up time writing css.
• create variables, so that if I change a color, I change the variable once, and don't need to 'find and replace' for several minutes.
• create reusable css that you can insert values into… i.e. write your “rounded corners” CSS once, then reuse it with different sizes as needed.

Let me explain a little deeper why I think LESS is superior to writing CSS. Web browsers read CSS, so ultimately you have to end up with a .css file to render the page. Normally when writing .css we just make a long list of display rules, then try to keep them 'together,' 'in order,' and (hopefully) 'logical'.

Example 1:

  
#main-menu {…}
#main-menu img {…}
#main-menu ul.menu {…}
#main-menu ul.menu li {…}
#main-menu ul.menu a {…}
  

A thought... with another thought's hat on.

Let's look at a more extreme example to illustrate a point. If we were creating an address book entry, and were using something like CSS markup, we would write down someone's contact information like this…

Example A:

  
Jon Smith […]
Jon Smith's address […]
Jon Smith's phone (h) […]
Jon Smith's phone (w) […]
Jon Smith's email […]
  

However; we would never do that! (At least, I don't think we would.) Instead, we want to use a simpler, more organized way to document this information…

Example B:
Jon Smith
address:
phone
(h):
(m):
email:


From LESS to CSS

That nested hierarchy concept is the basis for writing LESS. I can enter something like the following, using LESS hierarchy, and it will automatically generate the same “flat” CSS from Example 1.

Example 2:

  
#main-menu {
  img { }
  ul.menu { 
    li { }
    a { }     
  }
}
  

LESS is more powerful

This is a pretty basic example and is more to demonstrate the mind-set that I use for LESS. If you need to write a dozen lines of CSS, LESS is probably not needed. If you’re working on a CSS file that has hundreds of lines, with dozens of nested divs and selectors, then LESS is a powerful and empowering way to write that CSS code. When you combine the structure of LESS with things like variables, mixins, operations and functions… writing CSS just got a whole lot more fun!

A Bonus Example (variables)

Perhaps you are in a project that has a lot of rounded corners. You have to make small adjustments for each one of the elements, so you keep re-writing the radius properties each time. Stop doing that… write LESS! Declare your variable as a class and use it over, and over, and over again.

LESS Code:

  
.round-my-corners(@radius: 10px) {
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
 border-radius: @radius;
}
#normal_box {
 .round-my-corners;
}
#small_box {
 .round-my-corners(5px);
}
#large_box {
 .round-my-corners(20px);
}
  

Generated CSS Results:

  
#normal_box {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
}
#small_box {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
#large_box {
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
}
  

I <3 LESS

There is so much more to LESS. My goal with this post is to hopefully spark your interest. Perhaps engage you to take a chance on it if you have been considering it. If you are interested in more details there a few sites you would want to check out.

• The official LESS site has a lot of good examples and documentation
• The LESS Mac app is what I prefer
• The LESS Code plugin looks pretty interesting, though I haven't tried it yet
• The LESS Windows version