[SOUND] A directive is basically an official or authoritative instruction.

Okay, what does that mean anyway?

Directives appear in many logic-based languages, and

SASS is no stranger to logic.

What directives give us are ways to dynamically iterate through

complex solutions without having to write duplicate code.

This is the very essence of dry, so let's look at an example of the ad

each directive and how we can use smarter SASS to write less CSS.

One of the great new tools to use in CSS these days are custom designed icon fonts.

A few years back this was cutting edge, but today it's pretty much commonplace.

A leading resource for creating a custom library of icon fonts is easily IcoMoon.

While their browser tools for creating these custom libraries are awesome,

their output CSS could use some Sass-C support.

Two issues are, we all know that universal and attribute selectors suffer from

poor performance and in their sample code, it uses both?

So what we're looking for is an easy way to have SASS repeat all the code and

make it in such a way that it is easy to update and maintain.

So let's delete all of this here and what I want to do,

I'm going to paste in a model that we're going to go for.

So icon strategy after content.

Twitter after and github after, okay.

This is what we want to do.

So the first thing that we're dealing with is,

we have, we're easily seeing a repeated model where we basically the icon,

the name, the psuedoclass, the content, and a value all right.

So for starters let's delete all of this and

let's create a list that we're gonna work with.

So I have icon names, strategy, Twitter, github, okay.

To put this list to use we need to use the add each role in SASS to

loop through the list.

Add each takes two arguments, one for the variable and

the other one for the SASS script expression, okay.

The syntax is to say that you will create a new variable for each item in a list.

Tip, typically the list will be the plural, and

the individual variables will be the singular.

So in this use case, we will make icon-name out of icon-names.

So, let's, we're gonna come down here and

say at each, icon name in icon names.

Right, and then what we want to put in there is that pattern we were talking

about before.

So dot icon and I'm going to use interpolation again.

I want to get icon-name and then I'm gonna use after.

Okay, so this is getting us started here, so basically what this is gonna do is that

each icon name I'm gonna pull these things out one by one, and then each time it

loops through, it's gonna basically append that value to the variable of icon name.

So each icon name and icon names, I want it to basically print out icon dash,

with the name that it's currently doing and then create a pseudoselector.

So part one done.

So, now the next thing I needed was those PUA codes I was using.

So, to do this, I actually need to update my list to

make it a little bit more common place, and this is how I'm gonna do that.

So what's happening here is that in my list I basically have one,

two, three individual objects that are sep, separated by parens.

And then inside each of the parens I have the icon name and

then I have the PUA code and this is separated by a space, okay.

And the parens are also separated by a space as well just to

kind of keep it clean visually.

So with that done, now the next thing I need to do is I need to update my loop, so

that it's actually going to go through and

then each time it loops through it grabs one of these things.

So I still want the at each icon-name and icon-names.

But then the icon, dash, what I'm gonna do is I'm gonna use our nth function again.

So nth, icon-name, and then I want the first one that's inside of it.

Let's close out that paren, and that's what we're going to do that there.

So what I'm gonna do in here, is I want to use content,

I'm going to use that nth child again, and I'm going to come in here and

I want to say icon name two, okay.

By creating that very simple loop, we have reproduced on the right hand side our

model that we created from in the beginning.

So again what this is going through is that each icon name and icon names.

So on the one loop through it's going to grab this guy.

So then icon, to append this to the name of the selector.

Cuz I'm gonna use the nth child again to go into the icon name

because the value that came back from this loop is actually two things.

So I want icon name, I want the first value of that whole thing that was

returned and I'm gonna create the name after that.

So now, I'm gonna use the content because I need to place the POA code in there, and

then again, I'm wanna pull out the second value.

And then I need this to be a string so it's wrapped in the quotes, and then I'm

getting that second value and then I'm getting the output that we're looking for.