Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Modular CSS with Sass!
You have completed Modular CSS with Sass!
Preview
In this video, we'll finish writing the column loop by getting the values for $context and $target.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
So now we need to get those values for the
target and the context.
0:00
So for starters, we can use the g-context
function we
0:05
wrote in the previous video to give us the
context value.
0:08
So right above the rule, we will write a
variable of context.
0:12
And for the value, let's use that
g-context function.
0:17
And inside the parentheses, we'll pass the
$g-column-width, $g-column-count and
0:24
$g-gutter-width variables as arguments.
0:28
So first, let's say $g-col-width, followed
by $g-col-count.
0:31
[BLANK_AUDIO]
0:37
And finally, $g-gutter-width.
0:39
[BLANK_AUDIO]
0:42
So this $context variable will give us the
total width of all columns and
0:45
gutters based on the column count.
0:50
Now, to get the target value, we'll go
ahead and
0:53
write a $target variable right below
$context.
0:57
Then we're gonna multiply the column width
by the iterator.
1:01
So we'll add a set of parentheses, and
we'll say, $g-col-width times i.
1:05
And then we'll add the gutter width times
the iteration number minus 1.
1:15
So, another set of parens, and then we'll
say, $g-gutter-width times,
1:21
a set of parentheses, and the iteration
variable minus 1.
1:28
[BLANK_AUDIO]
1:33
All right, so we'll go ahead and save, and
1:38
it looks like we have no errors in the
console, so we're good to go.
1:40
So again, each column number will get
passed through our
1:45
selector to return a different class.
1:48
And each column number will get passed
through this target equation here with
1:52
this iterator variable to return a value
that
1:56
then gets divided by the context down here
in the width value.
1:59
All right, so
2:03
let's go ahead and bring up our CSS output
to see what this function did.
2:05
[BLANK_AUDIO]
2:09
We'll scroll down and find our grid
classes.
2:11
And great, here we can see that it did
create the grid classes we need for
2:14
all twelve columns.
2:19
And, as we can see,
2:22
it also returned all the fluid width
calculations for each column.
2:23
So now we have a pretty flexible grid
system we can use in our layout.
2:27
And anything about the grid that needs to
be changed can be done in the config file.
2:32
So, for instance,
2:38
I'll bring up the config file and scroll
down to the grid variables.
2:39
And, if we now want to change our columns
to be wider, so let's say, 75 pixels.
2:45
And we want our gutters to be smaller, so
let's change it to 15 pixels.
2:53
When we save and compile our config file,
and take a look at our CSS output,
2:59
we can see how it outputs new width values
for all of our columns.
3:04
But let's just say we need more columns.
3:10
So, let me go ahead and undo those values
we just defined, and
3:12
let's change the column count to 15
instead of 12.
3:17
So now, when we take a look at our CSS
output,
3:23
we can see how it recalculates the width
values to accommodate 15 columns.
3:27
So, cool.
3:33
But, moving forward, we'll go ahead and
keep the column count at 12.
3:34
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up