3 Examples of Using LESS for Efficient CSS

We recently saw a well done blog post entitled Why LESS is More but the author did receive some teasing due to the groan-worthy title. Our first thought was “Hmm, maybe this blogging thing isn’t such a good idea after all.” But alas, having a Developer’s Blog on our site means we probably have to publish articles on it as well.

In that spirit, and at the risk of incurring the sarcastic wrath of other Devs, we’ll contribute to why we also think LESS can be more. In particular, we’ll address 3 scenarios: Nesting, Variables and Mixins with Variables.

Nesting

For this example lets explore having a primary nav (“navigation”) consisting of a containing div (“division”) and the nav comprised of a ul (“unordered list”) and child li’s (“list items”) and adding styles in CSS (“cascading style sheets”). Let’s start with a look at the HTML and CSS:

HTML

<div class="primary-nav"> <ul> <li><a href="home.html">Home</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="about.html">About</a></li> </ul> </div>

CSS

.primary-nav a { color: #336699; } .primary-nav a:hover { color: #666666; } .primary-nav ul { list-style-type: none; padding: 0px; } .primary-nav ul li { display: inline; margin-right: 15px; }

In the above CSS we had to prefix each selector with the class primary-nav in order to target various elements of that section. To prevent that redundancy of repeating “.primary-nav” for each selector you can use LESS to nest declaration blocks. In LESS it would look like this:

LESS

.primary-nav { a { color: #336699; &:hover { color: #666666; } } ul { list-style-type: none; padding: 0px; li { display: inline; margin-right: 15px; } } }

Variables

This next example isn’t about writing less code but more about less headaches in having to sift through CSS. Assume that we have a few background images that are located in the same directory. Here’s what the CSS might look like:

CSS

.logo { background-image: url('images/backgrounds/logo.jpg'); } .project-1 { background-image: url('images/backgrounds/project_1.jpg'); } .project-2 { background-image: url('images/backgrounds/project_2.jpg'); } .project-3 { background-image: url('images/backgrounds/project_3.jpg'); }

It’s redundant to keep having to type the path of the image (“images/backgrounds/” in the above). In LESS you would simply set part of that path to a variable so it would look like this:

LESS

@backgrounds-path: 'images/backgrounds/'; .logo { background-image: url('@{backgrounds-path}logo.jpg'); } .project-1 { background-image: url('@{backgrounds-path}project_1.jpg'); } .project-2 { background-image: url('@{backgrounds-path}project_2.jpg'); } .project-3 { background-image: url('@{backgrounds-path}project_3.jpg'); }

Now a smart aleck (and there are quite a few of us in the Dev community) might say, “You’re still having to repeat the variable.” True, but what if the path was super long? Or if we had to change the paths? In the CSS example you would have to go through each declaration block and change the path. In LESS you can simply change the path of the variable (“backgrounds-path” in the above) and call it a day!

As an added bonus, you can also use variables for colors in LESS. That is mighty handy when there’s a color scheme for the site. You can define colors in one section or file and use them in various places:

LESS

@site-color-1: #003366; @site-color-2: #6699CC; @site-color-3: #999999; @border-color-1: #CCCCCC; h1, h2, h3 { color: @site-color-1; } p { color: @site-color-2; &.notes { color: @site-color-1; } } div.main-container { border-bottom: 1px solid @border-color-1; }

Mixins with Variables

Mixins allow you to specify a rule-set that can be used in various other sections. This commonly comes up when borders with rounded corners are used in different places. Here’s what the CSS might look like for 3 divs that have rounded borders but with various radii:

CSS

.rounded-border-sm { border: 1px solid black; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .rounded-border-md { border: 1px solid black; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .rounded-border-lg { border: 1px solid black; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

Having to type out “border: 1px solid black;” in each declaration block as well as typing out each border radius is redundant. We can clean this up in LESS and utilize both a mixin and a variable:

LESS

.rounded-border(@radius: 5px) { border: 1px solid black; -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .rounded-border-sm { .rounded-border(2px); } .rounded-border-md { .rounded-border(5px); } .rounded-border-lg { .rounded-border(10px); }

That allows the use of a parametric variable to set the radius within the mixin that contains the border-radius properties. Now just use the mixin within each block and you’re good to go. It can also be taken a step further by making the border width and the color of the border configurable as well:

LESS

.rounded-border(@radius: 5px, @border-width: 1px, @border-color: black) { border: @border-width solid @border-color; -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .rounded-border-sm { .rounded-border(2px, 1px, #CCCCCC); } .rounded-border-md { .rounded-border(5px, 2px, #666666); } .rounded-border-lg { .rounded-border(10px, 3px, #333333); }

The End (more or less)

Nesting, Variables and Mixins with Variables are just three examples of using LESS to go beyond traditional CSS. There are many more and it actually isn’t just about writing less code, but being more efficient. So maybe instead of the oxymoron “less is more” we should say, “working smarter, not just shorter!”

Endertech is a Web Design Company in Los Angeles able to provide solutions for your website development needs. Contact us for your free consultation.

The author of this article was Endertech Senior Developer Rolando Barona with editing by Digital Media Coordinator Casey.