Check out a free preview of the full Sass Fundamentals course

The "Challenge 10: @extend" 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 use @extend to modify the visual presentation of buttons.

Preview
Close

Transcript from the "Challenge 10: @extend" Lesson

[00:00:00]
>> Mike: Lets look at a short exercise involving @extend. Keep in mind, placeholders work very similar to classes in terms of how @extend works and how it should work and how you would think it works. So we want to have a very similar outcome as exercise one. Except what I have done here is I have placed buttons at the bottom of the exercise.

[00:00:26]
One of which has just the raw btn class on it, and I want no styles that directly affect btn. So what we want is to basically end up with the primary and secondary button classes, being sort of free standing. And their whole idea of being based on this, like base button class, that should be completely handled in the SASS later or it should never make its way into the CSS, right?

[00:00:54]
So you're gonna start with making btn a placeholder and extend primary and secondary from that and start to then get the test to pass

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