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're going to create a mixin that makes it easier to define an element's background image, width, height, and display property. Then, we'll write a mixin for generating pseudo-element shapes.
Quick Reference
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're going to write a few helper
mixins, to help us write and
0:00
maintain less code over time.
0:04
So, in our helpers.scss partial, I've
created a few helper
0:06
placeholder selectors, and a class we'll
use throughout this project.
0:11
So, here we have a clearfix placeholder
we'll use for clearing floats.
0:15
Below that, we have the srt or screen
reader text class.
0:20
And we'll use this in our markup and
extend it by other selectors to hide text
0:24
that's still accessible to screen readers
with these rules we've defined.
0:29
And below that, the psuedos placeholder
contains many of
0:33
the common properties used to generate and
display shapes with pseudo-elements.
0:36
So what we'll do first is create a
background image mixin.
0:41
We'll create one that makes it a little
easier to define a background image name,
0:44
width, height, and the element display.
0:49
And this will be especially useful as an
image replacement method
0:52
when combined with our screen reader text
helper class.
0:56
So what we'll do first is go over to our
config.scss partial, and right at
1:00
the bottom we'll define a variable that
sets the path to our image assets.
1:05
So let's write a new comment for path to
assets.
1:10
And we'll call our variable path--rel,
since
1:15
the value will retrieve a relative path to
our images directory.
1:21
So let's define that.
1:25
[BLANK_AUDIO]
1:26
Okay, so before we move on, let's go over
to our console and
1:29
write sass --watch scss:css, and now Sass
is watching for changes.
1:34
So I'll save the config file, and
1:39
go over to our utilities.scss file, where
we'll create our new mixin.
1:42
So, we'll call our mixin image replace, so
let's write @mixin img-replace().
1:47
[BLANK_AUDIO]
1:54
And we're going to have our mixin pass
four arguments.
1:59
One will be the image name with this img
variable.
2:03
Then the width, height, so we'll make our
last argument display,
2:07
and let's make this an optional argument
by giving it a default value of block.
2:14
So instead our image replace mixin, let's
first use the background-image property.
2:21
[BLANK_AUDIO]
2:27
So as the URL, we're going to pass that
path--rel variable we just created.
2:31
So using interpolation syntax with #{
we'll define the path--rel variable.
2:37
Followed by the image name, and that's
going to be passed with this img variable.
2:46
So I'll just go ahead and copy that.
2:53
And once again, we'll say hashtag, curly
braces, and
2:55
inside, I'll paste in that img variable.
2:58
So now right below background-image, let's
add a few more properties for
3:01
our img-replace mixin.
3:06
So we'll set the background-repeat to
no-repeat.
3:08
And now we'll want the width, so the value
for width will be that w variable.
3:15
And below that, we'll write the height
property, and
3:21
its value will be that height variable.
3:24
And finally, display, and the value will
be the display variable.
3:29
[BLANK_AUDIO]
3:34
So now we can include this img-replace
mixin in
3:36
any rule that needs background-image
properties.
3:39
So for example, let's bring up the
main.scss file.
3:42
And in our site logo rule, let's say,
@include img-replace.
3:46
And we'll want to display the logo.svg
image,
3:56
let's make the width 115 pixels, the
height will be 45 pixels.
4:00
And let's display it inline-block.
4:06
[BLANK_AUDIO]
4:09
All right, so when we save and compile our
SCSS and
4:11
refresh our preview, we can see our logo
image as a background.
4:15
So now to hide this text, we can use that
srt class in our markup.
4:20
So let's bring up the index.html file and
find our logo, and
4:26
we'll give this nested b element the class
srt for screen reader text.
4:32
Okay, so now when we save our HTML file
and refresh, the screen reader text is now
4:38
hidden, and we just get that nice logo as
a background image.
4:43
So next up, when generating shapes with
pseudo-elements,
4:47
we usually need to define certain
properties to display them.
4:51
Most of the time, it's properties like
content, display, or position.
4:55
Well, we already have this pseudos
placeholder for
4:59
some of these common properties and
values.
5:03
And what we're going to do next is create
a mixin I like to use for
5:05
generating pseudo-element shapes.
5:10
What we're gonna do is create the toggle
menu icon for
5:12
our toolkit using the before and after
pseudo-elements.
5:17
So back in our utilities file, below the
mixin we just created,
5:21
we are going to create a new mixin called
pseudo-element or p-el.
5:27
So inside the parentheses,
5:33
we're going to pass the type of
pseudo-element with this el variable.
5:36
Next we'll want the pseudo element width,
so
5:41
let's just create a new one called el-w.
5:44
And let's make the value null.
5:49
And finally, we'll want the height of the
pseudo-element, so we'll
5:52
create a new argument called el-height,
and we'll also make the value null.
5:55
So with the null values, we're making the
element width and
6:01
height variables optional.
6:05
And that way it doesn't output any CSS
unless we explicitly assign a value to
6:07
them when including the mixin.
6:12
So inside the mixin, we'll create a new
rule with the ampersand selector.
6:14
And this will for the type of
psuedo-element.
6:19
So we'll use the interpolation syntax so
that we're able to pass the el variable.
6:23
[BLANK_AUDIO]
6:29
And inside the rule,
6:35
we're going to extend the properties from
that pseudos placeholder, helper.
6:36
So we'll say @extend %pseudos.
6:41
[BLANK_AUDIO]
6:46
And now we'll add the width and height
properties to display the pseudo-element.
6:52
And the values we pass for the element
width and
6:56
element height arguments up here will set
the respective values.
7:00
So let's use the width property, and the
value will be the element width variable.
7:04
[BLANK_AUDIO]
7:10
Then we'll use the height property, and
the value for
7:12
this will be the element height variable.
7:16
And finally we'll also include a content
directive.
7:20
So I've added this content directive so
that we're able to pass more
7:22
styles to this mixin when including it in
a rule, which we'll do next.
7:25
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