Sass Fundamentals

Challenge 4: Mixins

Sass Fundamentals

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.


Transcript from the "Challenge 4: Mixins" Lesson

>> 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.

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.

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.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now