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

  1. An Introduction
  2. Using Variables
  3. Using Mixins
  4. Using Nested Rules
  5. Using Functions
  6. Divide and Conquer
  7. Put It Into Action

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’s 320 and Up project and snag the LESS reset file he has developed.

// ==========================================================

// 320 and Up by Andy Clarke
// Version: 3.0
// URL: http://stuffandnonsense.co.uk/projects/320andup/
// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0

// ==========================================================

/* Reset */

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin : 0; padding : 0; border : 0; outline : 0; font-size : 100%;
vertical-align : baseline; background : transparent; }									

article, aside, figure, footer, header, hgroup, nav, section { display : block; }

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.

Variables.less

// Variables for LESS Project
// --------------------------

// Because this code is only variables
// I do not need to add any CSS comments
// because this code will only be compiled
// into other parts of our styles.

// Colors
// ------

@red: 		#CF142B;
@blue: 		#00214D;
@white: 	#FFF;
@black: 	#000;
@lighterGray: 	#DDD;
@lightGray: 	#AAA;
@darkGray: 	#888;
@darkerGray: 	#222;

// Fonts
// -----

@baseFont: Helvetica, Arial, sans-serif;
@baseFontSize: 14px;
@baseLineHeight: 21px;

And Typography.less

// Typography
// ----------

/* Basic Typography for Project LESS */

body {
	font-family: @baseFont;
	font-size: @baseFontSize;
	line-height: @baseLineHeight;
}

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!

Download .zip files.

SHARE THIS POST
  • Eric

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

  • http://www.makemoneyinlife.com James W

    great post and very useful, right to the details, thanks for sharing