Learning LESS: Divide and Conquer

We’re getting to the end of our Learning LESS series, and this is one of the posts I’m most excited about. One of the best features of LESS is how modular and organized your code can be, and how it doesn’t add much weight or calls to your live sites (if you compile locally with LESS.app, CodeKit or some other compiler).

Blog Series Roadmap

Grab a cup o’ joe, your favorite text editor and let’s learn how to divide up our LESS and keep things neat and tidy.

Setting Up Your Project

Whenever I’m about to start a project from scratch using LESS, I set up a simple folder structure.

As you can see, my LESS and CSS are separate folders. My next step is I always add my site to LESS.app (or CodeKit if you prefer). LESS.app will automatically search for all LESS files in your site folder and set up to compile.

Before we do that, let’s create some LESS and learn how to modularize your code and then how to bring it together at the end.

Creating A Few LESS Files

The absolute first LESS file I create in any project is simply style.less. This is the file that will be compiled to be style.css, and act as the master CSS file for my entire project.

It is important to remember that comments in LESS are double backslashes (//) and are not compiled in the final CSS. Normal CSS comments (*/ … /*) are compiled as comments and can be used for organizational or normal comments.

That said, let’s take a look at my starting point for style.less.

// Style.less for Project LESS
// ---------------------------
/*
This is a project/blog for DeveloperDrive.com
written by Alex Ball.
Version 1.0.1
These are regular CSS comments that will be compiled normally.
*/

So, not much going on in that file … yet. Moving on to our next LESS file, I typically head to Andy Clark’s320 and Up project and snag the LESS reset file he has developed.

Now! Let’s get to the absolute beauty of LESS. So we want to include the reset in our final CSS style sheet, right? All we have to do is import it using one line of code. Our updated style.less now reads:

// Style.less for Project LESS
// ---------------------------
/*
This is a project/blog for DeveloperDrive.com
written by Alex Ball.
Version 1.0.1
These are regular CSS comments that will be compiled normally.
*/
// Import reset.less
@import "reset.less";

You can quickly see how keeping your LESS files separate can amazingly speed up development because you already have a reset file at your disposal for every project. There’s no need to go searching for a CSS reset every time you want to get started on a project, you just import the reset.less sheet!

Creating Additional LESS Sheets

For this example project, I’ve created two additional LESS sheets, variables.less and typography.less.

With those two sheets created, all we have to do is import them to our style.less sheet, save and our files are magically compiled together to make our single style.css.

Here is our updated style.less with our imports:

// Style.less for Project LESS
// ---------------------------
/*
This is a project/blog for DeveloperDrive.com
written by Alex Ball.
Version 1.0.1
These are regular CSS comments that will be compiled normally.
*/
// Import Reset
@import "reset.less";
// Import Variables
@import "variables.less";
// Site Specific Elements
@import "typography.less";

Our final compiled version is a bit lengthy to publish on there, but I’ve included all of the sample files as a downloadable file so you can take a look at the individual LESS files, the style.less file and the compiled style.css file.

Hope you enjoyed this segment of Learning LESS. Our final topic will cover putting LESS into practice and using it on a live site. Until next time!

Alex has been working in web design and development for over five years, and loves learning and expanding his skill set. A fan of CSS3 and HTML5, he also enjoys going old school with HTML (table) Emails.
More articles by Alex Ball

Eric

I think equally if not more important when setting up a project using less is to also import a mixins.less file.

Hey WordPress lovers. Every month dozens of incredible free WordPress plugins are released by the community, and we’re here to bring them to you. This seems to be a month of small but useful utilities that only do one or two things, with a few exceptions. So go on. March on down to the list, and get to it! (I'm only a little bit ashamed of that pun.) WP NoteUp ... Notes! Alongside your posts and pages! Use them to remind yourself, or other authors, about things you'd put in a note. That's really all there is to...

WordPress plugins are coming out all of the time, right and left. Every day, they’ve got new ones in the WordPress plugin repository for the curious developer to check out. Over time, your average designer or developer will end up with a list of their favorites. Usually, they’re plugins that solve common problems, are up-to-date and well-maintained, with good support. With that in mind, we’re sharing a list of some of the best plugins out there. Disable Comments ... Disable Comments does......

When I first started out creating websites with WordPress, I was in awe of the depth and variety of plugins available. During those golden days I would willingly install just about anything that looked cool. Shortly thereafter, I was smacked in the head by reality. Stuff started breaking and seriously hurt my good time. It turns out that not every plugin is a great one. And there are times when it seems like the work we do is held together with bubble gum and duct tape. Everything works splendidly until it...

WordPress is undoubtedly one of the most popular tools on the Internet because it makes it so easy to get a functional web site up and running in such a short time. And then there are the plugins. If you want your WordPress site to do something then odds are there is a plugin that you can install to make your site do what you want it to do. But plugins pose a bit of a problem at times. Since they are created by third-party developers you never know what quality control practices are used and what security testing...

WordPress beginners have difficulty customizing their websites past simple text changes, especially if they have no background knowledge of HTML or CSS. WordPress page builder plugins allow just about anyone to build a stylish or professional looking web page, through a user-friendly interface - quickly, and without knowing HTML or CSS. Though it may seem like WordPress page builder plugins have usefulness mainly for the technically unsavvy, they can also make a WordPress developer’s job...

Oftentimes, setting up a WordPress website results in a haphazard scramble to configure enough of the right plugins to make the client happy, and address any specific needs they might have mentioned. But a failure to install certain plugins means the client will come back at you with questions as to why it wasn’t done in the first place. Though you’re probably happy to rectify the problem (and collect a little extra money on the project), going back in to install plugins can distract from more profitable...

In Part 1 of this series we took a look at how you can better secure your WordPress files during, and after, the installation of the software. But once you have the files hardened against different threats, it is time to start looking at some of the different plug-ins available that can help you further protect and secure your WordPress site. WordPress Firewall 2 ... Having worked with a company that deals with web application firewalls, I can tell you from firsthand experience that these are by far one...

There’s a goal behind every website, and a specific chain of events that must occur before each goal is accomplished. Whether you want someone to sign up for your email newsletter, or fill out a contact form, these things don’t happen without the proper triggers. Used strategically, WordPress plugins can assist with the realization of important goals. Here’s how to turn your website into a conversion machine with WordPress Plugins. Essential Grid ... Essential Grid is an all-around grid solution...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.