- [Instructor] Hi, this is Chris Converse,
and in this episode we'll take a look
at how nesting techniques and LESS, can reduce the amount
of CSS you need to initially write.
In CSS, writing specific selectors requires
that you repeat those selector names quite a few times.
Once for each rule, in fact.
LESS allows us to nest the selectors when writing our CSS,
and once compiled, the resulting CSS will contain
the more verbose rules required by a browser.
We covered a similar technique in a previous episode
using SASS instead of LESS, so if you would like
to follow along with me, download the Exercise Files,
get your pre-processor software ready,
and let's begin by exploring what's in the Exercise Files.
So in the exercise files, there's an index.html file,
this file links to the style.css file,
and this file is compiled from the LESS file here.
And from my pre-processor, I'm using a piece
of software called CodeKit.
So this CodeKit file here will not be included
in your files, unless of course, you're going
to be using CodeKit.
And you can use any LESS pre-processor that you want
to follow along.
So to begin, let's come down and select index.html.
And let's open this in a text editor.
So once you have the file open,
up in the head area, you'll see that I am referencing
the style.css file.
Down in the body area, we have a header,
and an article element.
The article has three asides, one for windmills,
one for museums, and one for canals,
and it's these aside elements that we're going
to be floating into columns.
So we'll use nested techniques in LESS
to reduce the amount of CSS we would need to write
to create these columns.
And if you'd like to see the layout we're going
to be starting with, you can open index.html in a browser
so you can see those three aside elements showing up here.
And now to begin working on our layout, let's go back
to the Exercise Files, let's file style.less,
let's open this in our text editor,
and now, in my particular text editor,
I can split the screen, and show two documents.
So what I'm going to do is go back to the Exercise Files,
and open the style.css file in my window on the right.
This way, I can see the result
of the LESS file being compiled into CSS.
Now, in the LESS file, let's scroll down
to the bottom.
I added a CSS comment down here,
for where we're going to be adding our nesting.
So after this comment, let's come in here
and first target the article element.
So type in article, then a space, add in our brackets,
let's split this open, and now inside
of the article selector, we're going
to add another selector for the aside.
So I'm going to hit Tab to keep this nicely formatted.
Let's type aside, put in our beginning and ending brackets.
Next, let's split open the brackets for the aside,
now inside the aside selector, let's come in here
and set the width to 33%.
On the next line, let's set up float property.
We're going to set the float to left.
Next we'll set box sizing.
We'll set this to border box.
And then finally, let's come in and add padding.
So for the padding, we're going to set 15 pixels on the top,
30 pixels on the right,
zero on the bottom, and zero on the left.
So at this point I'll hit Save.
My pre-processing software will convert the LESS file
into CSS, and now we'll come over here
to the CSS file, scroll down to the bottom,
and I can see that my nested rule was converted
into article, space, aside.
So now, with that working properly,
let's go back to our less file and I want
to target the h2 elements that are inside
of the aside element.
So after the padding property, still inside
of the aside selector, let's hit a few returns,
and let's add another selector for an h2.
So we'll type h2, then a space, then put
in our brackets, let's split these open,
and inside of the h2 selector, let's add some properties.
So first, we'll set text transform,
we'll set this to upper case.
Next line, we'll set letter spacing.
We're going to set this to 5 pixels.
Next line, we're going to set a padding property,
we're going to set the padding to zero on the top,
zero on the right, eight pixels on the bottom,
and zero on the left.
And then finally, we're going to set a border bottom property.
So, border-bottom, size is one pixel, style is solid,
and we're going to use the RGBA color space,
so rgba, put in our parentheses,
we're going to use zero for red, zero for green, zero for blue,
and .2 for the alpha.
I'll just scroll up here a little bit.
Now, after the h2, but still inside
of the aside selector, let's come in here
and target the paragraph elements,
so we'll type a p, then a space, put in our brackets.
Inside of the p selector, we're going to come in here
and set the font size, we're going to set this
to .9ems, semicolon.
After the paragraph selector, let's come in here
and target the images that are inside of the aside.
So we'll type img, put in our brackets, again,
split this open, and for the images,
we're going to set a height property of 4.4ems.
Next we'll set a float property of left,
and then finally, we'll set a margin property.
We're going to set 5 pixels on the top,
13 pixels on the right,
zero on the bottom, and zero on the left.
So with these in place, I'll hit Save.
Over in the CSS file, let's scroll down,
and we can see all of the specific CSS rules
that have been generated from that LESS file.
So now, we'll go back to the browser.
I'll hit Reload, and now we can see all of those
aside elements are now being converted into columns.
So when looking at the final compiled CSS file,
the amount of code generated
by LESS exceeds the amount of code
that we actually had to type into the LESS file.
Now, if you would like to learn more
about using LESS and SASS, I'd recommend taking a look
at Joe Marini's course entitled,
CSS with LESS and SASS, which is also available here
in the library.
And so, with that, I'll conclude this episode,
and, as always, thanks for watching.