- [Instructor] Hi, this is Chris Converse,
and in this episode, we'll look at how
nesting techniques in SASS can reduce
the amount of CSS that you need to write.
In CSS, writing specific selectors requires
that you repeat the selector names
quite a few times, once for each rule, in fact.
SASS allows us to nest selectors
when writing CSS, and once compiled,
the resulting CSS will contain the more
verbose rules required by a web browser.
And in a future episode, we'll cover
a similar technique using LESS instead of SASS.
So to follow along with me in this episode,
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 we have an index.html file.
This file links to the file called style.css.
And this file is actually compiled
from our .scss file, which is the
SASS CSS form of SASS.
Now your pre-processor software will convert
the SASS file into the CSS file.
So in my workflow, the pre-processor
I'm using is called CodeKit.
So in my particular files, I have a CodeKit file
showing up here, but this file
is not included in the exercise files.
Of course, if you're using CodeKit,
CodeKit will generate this file for you,
or you can use any pre-processor software
that will convert your SASS file into CSS.
So to begin, let's come down here
and select index.html, and let's
open this in our text editor.
So once you have the HTML file open,
you'll see in the head area,
we have a link to style.css.
In the body area, we have a header
and an article element.
Inside of the article element we have
three aside elements.
We're going to turn these aside elements
into columns and we're going to use nesting
techniques in SASS to reduce the
amount of CSS we need to write.
Now if you'd like to see the layout we're working with,
you can open index.html in a browser.
So we're going to be taking these three
aside elements here, with windmills,
museums, and canals, and we're going to
turn these into columns.
So now let's go back to the exercise files.
Let's find style.scss.
Let's open this in our text editor.
And now in my particular text editor,
I can split the screen and look at
two different files.
So what I'm going to do is split the screen,
go back to the exercise files, then I'm going to
open style.css in the second window.
Now I'm doing this so that we can see the CSS
rules that will be generated from our SASS file.
So I'm going to be working on the left-hand side
in the SASS file, but we can see the
results in the right-hand side in the CSS file.
So in my SASS file, I'm going to scroll
all the way down here to the bottom.
I put a CSS commenting here that says
SASS nesting, so we're going to put our
nesting rules below this.
And let's start by targeting the article element.
So I'll type in article, space,
add in our brackets.
So now we'll come in here and split this open
and what we want to do is target the
aside elements inside of the article.
I'm going to hit a tab character just to
format this a little bit,
and then inside this article rule,
we're going to add an aside rule.
So I'll type aside, then a space,
put in our brackets.
I'm going to split these open,
and now we're going to put in some properties
that are going to target the aside element.
So let's come up here and make sure
we're inside of the brackets for the aside.
Let's come in here and set a width property.
So we'll set the width to 33%.
Next line, let's set a float property.
We're going to set float to left.
Enter semicolon.
Next line, let's add box sizing.
We're going to set this to border box.
And finally, let's come in here and set padding.
We'll set 15 on the top, 30 on the right,
zero on the bottom and zero on the left.
Now with these in place, I'm going to hit save.
My pre-processor software is going to
process the SASS file into a CSS.
So now, in my text editor,
I'm going to scroll down to the bottom
of the CSS file
and notice that we got a rule here
with article space aside.
So the browser doesn't actually understand
nested rules, but again, the SASS file
is being processed into CSS.
And now if we go back to the browser,
hit reload, we can now see the effect
of that CSS on those aside elements.
So now, back in our SASS file,
let's target the H2 elements that
are inside of the aside.
So we're going to nest the H2 selectors
inside of the nested aside selector.
So let's come in here, after padding,
let's hit a few returns.
I'll tab this in.
Let's type H2, put in our brackets,
split this open.
Inside of the H2 selector, let's come in here
and set a few properties.
So we'll set text transform.
We're going to set this to uppercase.
Next we'll set letter spacing to five pixels.
Next, we'll set the padding to zero on the top,
zero on the right, eight pixels on the bottom,
and zero on the left.
Let's scroll up here a little bit.
And then finally let's come in here
and set border bottom.
We're going to set this to a size of one pixel.
Set the style to solid,
and for the color we'll use RGBA.
So RGBA, put in our parentheses,
we're going to set zero for red, green, and blue,
which will give us black.
Then a comma, then .2 for the alpha.
Next we'll target the paragraph elements
inside of the aside.
So let's get our cursor after the
ending bracket for the H2.
Let's hit a return, we'll add a paragraph element.
Put in our brackets, so the paragraph
and the H2 are both inside of the aside selector.
So for paragraph, let's come in here
and just simply set font size.
We'll set this to .9ms.
Semicolon.
And again, inside of the aside selector,
let's come in here and target the images inside.
So IMG, put in our brackets,
split these open, and for the image,
we're going to set a height,
and the height's going to be set to 4.4ms.
Next, we'll set a float property to left.
And then, finally let's come in and set
the margin to five pixels on the top,
13 pixels on the right,
zero on the bottom and zero on the left.
Now we'll hit save.
My SASS file will be converted to CSS.
I'm going to scroll down here in the CSS file,
and we can see all of the specific selectors
that have been created by converting
our SASS file to CSS.
And then if we go back to the browser,
hit reload, we can see the result
of all of those CSS rules that were generated.
So now, when looking at the final compiled CSS,
the amount of code generated by SASS
exceeds the amount of code that we had to write
into the SCSS file.
And now, if you'd like to learn more about
using SASS or LESS,
I'd recommend taking 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.