Learning LESS: Nested Rules

We continue on our journey of Learning LESS today as we take a look at Nested Rules in LESS, which will help you write extremely clean code. If you haven’t read our first three posts on the topic, check out Learning LESS: An Introduction, Learning LESS: Variables and Learning LESS: Mixins.

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

Now we jump into Nested Rules, a topic that can be somewhat difficult to conceptualize, but we’ll break it down with great code examples and some diagrams.

What Do You Mean ‘Nested’?

I’m sure you’ve heard of ‘nesting’ in code, probably referring to nested tables in old table design websites (or current table design HTML emails). With LESS, we’re basically doing the same concept of nesting rules within other rules.

Let’s set up an example. You’re coding a website and you’ve got a paragraph rule. In addition to your standard paragraph tag, you also have classes for an intro paragraph and a highlighted paragraph. For this scenario, let’s say that you’re going to set the standard paragraph with a basic sans-serif font, general font size, line height, etc. Here is what our CSS looks like (note, this isn’t going into our LESS file – this is just for example):

p {
    color: #232323;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 21px;
}

Pretty standard, so far. For your intro paragraph class, you set the font size to be a little bit bigger and have the text be small caps. And for the highlighted paragraph, we’ll make the text a bold blue. Don’t ask me why you would want to do this in terms of modern design – I’m just trying to come up with creative examples!

So in CSS, you would write those classes like this:

p {
    color: #232323;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 21px;
}

p .intro {
    font-variant: small-caps;
    font-size: 16px;
    line-height: 24px;
}

p .highlight {
    color: #00214D;
    font-weight: bold;
}

The code isn’t super lengthy, but mostly because this is a basic example. But the LESS for this is even – well – less.

Writing A LESS Nested Rule

We’re going to replicate the code we wrote above using LESS and nested rules. A LESS nested rule starts like a regular rule. For this, we’ll also use variables, just to drill in the concept.

To start, we look at our basic paragraph tag:

// Variables
// ---------

@textColor: #232323;
@textHighlight: #00214D;
@fontFamily: Helvetica, Arial, sans-serif;
@fontSize: 14px;
@lineHeight: 21px;

@introSize: 16px;
@introLineHeight: 24px;
@introFontVariant: small-caps;

// LESS for Paragraph
// ------------------

p {
	color: @textColor;
	font-family: @fontFamily;
	font-size: @fontSize;
	line-height: @lineHeight;
}

Now we’re going to nest in the .intro class. To do this, we simply create the class as we normally would, but we include the class inside the curly braces of the paragraph rule.

// Variables
// ---------

@textColor: #232323;
@textHighlight: #00214D;
@fontFamily: Helvetica, Arial, sans-serif;
@fontSize: 14px;
@lineHeight: 21px;

@introSize: 16px;
@introLineHeight: 24px;
@introFontVariant: small-caps;

// LESS for Paragraph
// ------------------

p {
	color: @textColor;
	font-family: @fontFamily;
	font-size: @fontSize;
	line-height: @lineHeight;

	.intro {
		font-variant: @introFontVariant;
		font-size: @introSize;
		line-height: @introLineHeight;
	} // End of .intro class

	.highlight {
		color: @textHighlight;
		font-weight: bold;
	} // End of .highlight class

} // End of paragraph rule

All of the LESS code above compiles to result in this:

p {
  color: #222222;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
}
p .intro {
  font-variant: small-caps;
  font-size: 16px;
  line-height: 24px;
}
p .highlight {
  color: #00214d;
  font-weight: bold;
}

Which is identical to what we originally had. Now this may seem like it was actually more code than our initial CSS example, but keep in mind, you’ll likely have your variables stored in a separate LESS file, allowing for easy manipulation.

But Wait, I Don’t Want All Descendants, What Do I Do?

Great question, and LESS includes a quick and simple solution. If you would rather have your CSS read p.intro instead of p .intro, simply add an ampersand (&) prior to your nested rule. Check out the code example below on the intro class.

// LESS for Paragraph
// ------------------

p {
	color: @textColor;
	font-family: @fontFamily;
	font-size: @fontSize;
	line-height: @lineHeight;

	&.intro {
		font-variant: @introFontVariant;
		font-size: @introSize;
		line-height: @introLineHeight;
	}

	.highlight {
		color: @textHighlight;
		font-weight: bold;
	}

}

Which results in the following compiled code:

p {
  color: #222222;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
}
p.intro {
  font-variant: small-caps;
  font-size: 16px;
  line-height: 24px;
}
p .highlight {
  color: #00214d;
  font-weight: bold;
}

This is very important to note because there will be times when you want the descendant operator, and times when you just want to target elements with specific classes.

Where To Next?

Next up, we’re going to take a look at functions in LESS. We’ll also touch on operators as well. Anyone have questions on using nested rules in your LESS files? Let us know in the comments below and we’ll see you next time! Thanks for reading.

SHARE THIS POST
  • http://twitter.com/just4TheALofit TheAL

    The series is really shaping up so far. I’ll def be recommending it to anyone new to LESS or CSS in general.

    Related note: all of the older articles need to be linked together. The 7-item index on top of each article should be updated to reflect all published articles. Thanks!

  • zentaurus

    Please complete the links between the series of posts at the beginning of each!