Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

LESS is More

Parent Feed: 

Posted Apr 23, 2012 // 7 comments

Let’s face it – data is invaluable, integrations are key, and generating that information into something that will show up on a person’s browser (often) thousands of miles away in a matter of seconds is a modern miracle. However, if your site isn’t aesthetically appealing, nobody will stick around to see all the good stuff. This is where Cascading Style Sheets (CSS) come into play, and why tools such as LESS that make CSS easier to develop and revise have seen widespread adoption in web development.

CSS is an incredibly powerful tool, allowing web developers and designers to alter the entire look and feel of a website with a few simple style rules. Something as simple as: 

a, a:link, a:visited {
  text-decoration: none;
  color: red;
  font-style: italic;
}

can change the appearance of every link (the “A” tag) on every page of your site. Although very powerful and flexible, some aspects of writing CSS become redundant and hard to re-use such as colors, backgrounds, and dimensions. This is where CSS preprocessors such as LESS come to your rescue.  

LESS is More

LESS was born out of perceived shortcomings of the SASS project, and provides more options for developers to implement. LESS can be set up using a Node.js server to generate new CSS files from LESS files as they are changed. You can also include a LESS JavaScript library that will effect just-in-time compilation of LESS code on the browser. Another option available in CMS environments such as Drupal and WordPress are plugins that compile LESS code on the fly on the server so there is neither a slowdown on a user’s browser nor a need to configure a Node.js installation (which is not for the faint of heart). On to some contrived examples to demonstrate what LESS brings to the table.

Variables

For example, you want to modify the style used on several elements, but the design calls for the same color to be used in several places that don’t lend themselves to leveraging pure CSS to use the same color, as in this example where a color is used for text in one rule and the background in the other:

h1.title {
  font-size: 1.5em;
  color: #339966;
}
...
h2.title {
  font-weight: bold;
  padding: 10px;
  background: #339966;
  color: white;
}

Now if you decide that the shade of green shown above needs to be changed everywhere in the site, you have to search and replace all properties in all stylesheets with pure CSS, making sure you don’t accidentally change the color where it might still need to be used. With LESS, you can declare a variable to use like this:

@title-color: #339966;

h1.title {
  font-size: 1.5em;
  color: @title-color;
}
h2.title {
  font-weight: bold;
  padding: 10px;
  background: @title-color;
  color: white;
}

Nesting

The LESS syntax also allows for more logical grouping of CSS rules. Say for instance you had markup for a listing that had CSS like the following:

#list {
  margin: 20px 0;
}
#list .list-item {
  color: black;
}
#list .list-item.odd {
  background: #eee;
}
#list .list-item .list-item-title {
  font-size : 1.25em;
  font-weight: bold;
}
#list .list-item .list-item-content {
  font-size: 0.75em;
  margin: 0 0 0 20px;
}

This same CSS rules could be written using LESS as:

#list {
  margin: 20px 0;
  .list-item {
    color: black;
    &.odd {
      background: #eee;
    }
    .list-item-title {
      font-size : 1.25em;
      font-weight: bold;
    }
    .list-item-title {
      font-size: 0.75em;
      margin: 0 0 0 20px;
    }
  }
}

Notice how child items can logically be nested, and the selectors don’t require the parents to be specified once nested. Multiple classes and pseudo-classes can even be treated as child selector elements that modify a main class using the “&” notation. 

Mixins

Yet another powerful feature available in LESS is the concept of “mixins” which allow you to re-use CSS “fragments” in multiple rules, including parameterized values (example borrowed from the LESS site):

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

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Where the CSS fragment declared for class “.rounded-corners” is re-usable in the header and footer declarations with different corner radii. 

Functions & Operators

LESS also allows for functions and operations to be applied to various CSS attributes such as dimensions and colors, which are entirely too detailed to get into in this intro. Suffice to say there are numerous examples and a full function reference available on the LESS site.

In summary, if you are looking for a more logical and flexible way to build CSS, look into LESS. It extends CSS in a logical way that allows legacy CSS to still work as always, but allow developers and designers a way to organize CSS in a way that makes more sense and gives more options for modifying rules and values en masse with either the server or browser.

References

As a Senior Developer at Phase2, Robert Bates is able to pursue his interests in solving complex multi-tier integration challenges with elegant solutions. He has experience not only in traditional web programming languages such as PHP and ...

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web