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
Using Sass' ability to generate BEM selectors with &-suffix naming conventions, let's create a handy mixin for writing BEM selectors!
This video doesn't have any notes.
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 knowing what we now know about the BEM
naming convention and Sass's ability to
0:00
generate BEM selectors with an ampersand
and a suffix, let's take things a step
0:04
further by creating a mixin that makes
writing BEM selectors a little easier.
0:10
So we'll go over to the utilities partial.
0:16
And at the bottom of the file, we should
see this comment for BEM selectors.
0:19
So first, we'll create a mixin for styling
elements inside a block.
0:24
So, let's say, @mixin and we'll call it e
for element.
0:29
Then, we'll need to pass the element
selector name as the argument.
0:38
So, inside the parentheses, we'll create
the variable element as our argument.
0:42
So, we know that these sub-components or
0:50
child elements get prepended with two
underscores.
0:52
So, we'll use the ampersand and a double
underscore to generate
0:56
an element selector based on the parent
and the value passed for element.
1:01
So again, we're using interpolation syntax
to
1:08
output the selector with this element
variable.
1:11
So then I'll go ahead and add the content
directive inside of the rule.
1:18
This way we're able to pass more styles to
this mixin when we include it in a rule.
1:23
So next, I'll just go ahead and copy the
mixin we just wrote and paste
1:29
it right below, because we're going to use
this mixin to create our modifier mixin.
1:35
So first, we'll create the modifier mixin
by giving it the name m for modifier.
1:41
And this time we'll need to pass the
modifier name as the argument.
1:47
So instead of element, we'll say modifier.
1:50
Now, as we know by now, modifier selectors
get prepended with two hyphens.
1:54
So, we'll replace the double underscore
with the two hyphens.
1:59
Then, we'll need to change the selector
variable here to modifier.
2:03
So now let's go ahead and save our
utilities file and go over to
2:09
our nav partial, and let's include the
mixins we just wrote in our nav rule here.
2:12
In our element selector, instead of using
the ampersand double
2:17
under score we can say, include e for the
element selector.
2:23
Then pass item as the element name.
2:28
And again, for our modifier selector,
instead of ampersand, dash, dash current,
2:31
we can replace that by including the
modifier mixin.
2:38
And passing current as the modifier.
2:43
And I'll just go ahead and nest the anchor
rule inside.
2:48
So now we can save our nav partial and
bring up our CSS output.
2:53
And as we can see here, at the bottom of
our CSS file,
2:59
it returns this same CSS output as before.
3:02
So now, for BEM naming, we can stick with
these mixins,
3:06
because they feel a little more
descriptive and intuitive.
3:10
So, when writing modular rules with SAS,
we can also take advantage of
3:14
placeholder selectors to keep our SAS
rules drier and a little more compact.
3:18
Now, one of the biggest advantages of
using placeholder selectors with BEM
3:24
is that we're also able to extend an
element's base styles from any rule.
3:28
And this is especially useful for modifier
elements, because it can
3:34
prevent us from having to define both the
element and modifier class in the markup.
3:39
Like we're doing here with nav__item and
nav__item--current.
3:44
So it's nice to be able to simply define a
nav__item--current class in the markup and
3:48
have it inherit all the base styles from
nav__item.
3:54
So let's go ahead and do that.
3:58
Let's bring up the extends.scss partial,
4:00
which already contains a few placeholder
selectors for buttons.
4:03
And right below, you should see this Nav
Items comment, and
4:08
this is where we're gonna create our nav
item placeholders.
4:12
So first, we'll create one called
%nav-item-disp, and
4:15
this is gonna contain all the display
styles for our nav items.
4:20
So what I'll do is go over to nav.scss and
4:24
copy the display and margin properties
from the nav item rule here.
4:30
And I'll go back to the extends.scss
partial and
4:35
paste those properties inside of
%nav-item-disp.
4:39
Okay?
So next, we'll create another placeholder.
4:43
This time we'll call it %nav-item-link and
this will be for the links in our nav.
4:46
So I'll go back to nav.scss and copy all
the properties inside
4:53
this nested a rule, and just paste them in
our placeholder.
4:59
And we're actually gonna need every
property except for the color property and
5:06
we'll see why in just a bit, so
5:10
I'll just go ahead and delete it from this
placeholder.
5:12
Okay, so finally we'll create one more
placeholder rule and
5:15
we'll call the selector, %nav-item-on.
5:21
And now just go ahead and copy the color
and order color declarations in
5:26
our current modifier rule, and paste them
inside our %nav-item-on placeholder.
5:31
Okay.
So now that we've abstracted all the base
5:37
styles into placeholder selectors, we can
extend them wherever necessary.
5:40
So back in our nav component rule,
5:45
we'll need to extend some of those
placeholders we just wrote.
5:48
So, first, inside the nav item rule,
5:52
we can actually get rid of the display and
margin declarations.
5:56
And now we can extend the %nav-item-disp
placeholder.
6:00
So, I'll say, extend.
6:05
[SOUND] So next, I'll just go ahead and
6:06
copy this extend directive.
6:12
And right below in our anchor element
rule, I will go ahead and remove the font
6:16
size and font weight declarations and
everything below the color property.
6:21
That's the only one we are going to keep,
and
6:26
this time we are going to extend the
%nav-item-link placeholder.
6:27
So what we'll do next is create a hover
rule for our links.
6:31
So I'm going to nest a new selector using
&hover.
6:36
And in our hover rule, we're going to
extend the %nav-item-on placeholder.
6:40
So finally, we'll go down to our current
modifier rule here.
6:48
And the first thing we'll do is extend
%nav-item-disp.
6:52
And inside the a rule, let's extend
%nav-item-link.
6:57
So, I'll just copy it from the rule above
and we'll remove the color and
7:03
border declarations.
7:07
And let's also extend %nav-item-on.
7:09
[NOISE] All right.
7:16
So now we should only be left with this
color declarations, and
7:19
the rest are our placeholder extends.
7:24
So as we can see, this makes our nav
component rule look a lot cleaner.
7:28
And now we can go back to our markup and
remove the nav__item at the base
7:33
class from the current item leaving the
modifier class only.
7:37
So when we save our index file and go back
to the browser preview, and
7:43
refresh, we can see that everything still
looks the same.
7:48
So that's great.
7:51
And in the CSS output, notice how our
selectors are all
7:52
nicely grouped without repeating any CSS
properties.
7:56
So as we can see, modular CSS is all about
abstraction.
8:00
We're grouping selectors that share common
base styles with placeholders.
8:05
Then, in separate rules, we're defining
the differences and variations.
8:10
So next, we'll see how to apply these
concepts to web typography layout.
8:15
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