Sass Fundamentals

Sass Fundamentals Challenge 4: Mixins

Learning Paths:
Check out a free preview of the full Sass Fundamentals course:
The "Challenge 4: Mixins" Lesson is part of the full, Sass Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students import a partial with Sass and fix styles with Sass rules.

Get Unlimited Access Now

Transcript from the "Challenge 4: Mixins" Lesson

[00:00:00]
>> Mike North: Let's make a rainbow array of buttons. I know, lots of buttons today, it's fantastic. In your app.scss, you're already set up to consume a mixin for this case. It's just not doing anything. Your job is to fill in the blank. So I've already saved you the effort of wiring it up yourself.

[00:00:20] It's already included and there should be an _mixins file, like a partial, Sass partial that contains this thing, right? And it should take an argument as color. And so what we want to do is build a mixin where we can define a button of an arbitrary color very easily.

[00:00:41] And you should see in your app.scss we're creating all seven of these things with just one line each, for each flavor of button that we have here. So this would be great if we were building a material design library or something like that where we want to allow a very high degree of customization but we don't want our Sass to grow in complexity.