This course will be retired on March 24, 2020.
Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
Directives appear in many logic based languages and Sass is no stranger to logic.
You'll be working in Sassmeister for this course.
Like what you see and want to read more? Check out 'Sass in the Real World' for more on Advanced Sass!
-
0:00
[SOUND] A directive is basically an official or authoritative instruction.
-
0:09
Okay, what does that mean anyway?
-
0:11
Directives appear in many logic-based languages, and
-
0:15
SASS is no stranger to logic.
-
0:18
What directives give us are ways to dynamically iterate through
-
0:22
complex solutions without having to write duplicate code.
-
0:26
This is the very essence of dry, so let's look at an example of the ad
-
0:32
each directive and how we can use smarter SASS to write less CSS.
-
0:39
One of the great new tools to use in CSS these days are custom designed icon fonts.
-
0:44
A few years back this was cutting edge, but today it's pretty much commonplace.
-
0:48
A leading resource for creating a custom library of icon fonts is easily IcoMoon.
-
0:54
While their browser tools for creating these custom libraries are awesome,
-
0:57
their output CSS could use some Sass-C support.
-
1:00
Two issues are, we all know that universal and attribute selectors suffer from
-
1:05
poor performance and in their sample code, it uses both?
-
1:09
So what we're looking for is an easy way to have SASS repeat all the code and
-
1:14
make it in such a way that it is easy to update and maintain.
-
1:18
So let's delete all of this here and what I want to do,
-
1:21
I'm going to paste in a model that we're going to go for.
-
1:24
So icon strategy after content.
-
1:27
Twitter after and github after, okay.
-
1:30
This is what we want to do.
-
1:32
So the first thing that we're dealing with is,
-
1:34
we have, we're easily seeing a repeated model where we basically the icon,
-
1:39
the name, the psuedoclass, the content, and a value all right.
-
1:44
So for starters let's delete all of this and
-
1:47
let's create a list that we're gonna work with.
-
1:51
So I have icon names, strategy, Twitter, github, okay.
-
1:56
To put this list to use we need to use the add each role in SASS to
-
2:00
loop through the list.
-
2:01
Add each takes two arguments, one for the variable and
-
2:04
the other one for the SASS script expression, okay.
-
2:07
The syntax is to say that you will create a new variable for each item in a list.
-
2:12
Tip, typically the list will be the plural, and
-
2:15
the individual variables will be the singular.
-
2:18
So in this use case, we will make icon-name out of icon-names.
-
2:23
So, let's, we're gonna come down here and
-
2:31
say at each, icon name in icon names.
-
2:39
Right, and then what we want to put in there is that pattern we were talking
-
2:42
about before.
-
2:43
So dot icon and I'm going to use interpolation again.
-
2:47
I want to get icon-name and then I'm gonna use after.
-
2:58
Okay, so this is getting us started here, so basically what this is gonna do is that
-
3:02
each icon name I'm gonna pull these things out one by one, and then each time it
-
3:08
loops through, it's gonna basically append that value to the variable of icon name.
-
3:13
So each icon name and icon names, I want it to basically print out icon dash,
-
3:18
with the name that it's currently doing and then create a pseudoselector.
-
3:22
So part one done.
-
3:24
So, now the next thing I needed was those PUA codes I was using.
-
3:28
So, to do this, I actually need to update my list to
-
3:32
make it a little bit more common place, and this is how I'm gonna do that.
-
3:36
So what's happening here is that in my list I basically have one,
-
3:41
two, three individual objects that are sep, separated by parens.
-
3:45
And then inside each of the parens I have the icon name and
-
3:48
then I have the PUA code and this is separated by a space, okay.
-
3:53
And the parens are also separated by a space as well just to
-
3:55
kind of keep it clean visually.
-
3:58
So with that done, now the next thing I need to do is I need to update my loop, so
-
4:03
that it's actually going to go through and
-
4:05
then each time it loops through it grabs one of these things.
-
4:08
So I still want the at each icon-name and icon-names.
-
4:11
But then the icon, dash, what I'm gonna do is I'm gonna use our nth function again.
-
4:17
So nth, icon-name, and then I want the first one that's inside of it.
-
4:25
Let's close out that paren, and that's what we're going to do that there.
-
4:28
So what I'm gonna do in here, is I want to use content,
-
4:32
I'm going to use that nth child again, and I'm going to come in here and
-
4:37
I want to say icon name two, okay.
-
4:45
By creating that very simple loop, we have reproduced on the right hand side our
-
4:50
model that we created from in the beginning.
-
4:53
So again what this is going through is that each icon name and icon names.
-
4:56
So on the one loop through it's going to grab this guy.
-
4:59
So then icon, to append this to the name of the selector.
-
5:04
Cuz I'm gonna use the nth child again to go into the icon name
-
5:07
because the value that came back from this loop is actually two things.
-
5:11
So I want icon name, I want the first value of that whole thing that was
-
5:15
returned and I'm gonna create the name after that.
-
5:18
So now, I'm gonna use the content because I need to place the POA code in there, and
-
5:21
then again, I'm wanna pull out the second value.
-
5:24
And then I need this to be a string so it's wrapped in the quotes, and then I'm
-
5:27
getting that second value and then I'm getting the output that we're looking for.
You need to sign up for Treehouse in order to download course files.
Sign up