Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Advanced Sass Advanced Variables, Mixins, Functions, and Placeholders Extends

Posted by Wendell Pulsipher
Wendell Pulsipher
10,183 Points

So freaking SICK of playing this guessing game. Sass placeholders

here is the question: Update the following selectors with Sass's placeholder selectors, so that you output the same CSS.

here is my code

b {
  font: {
    weight: bold;
    size: 3.8333em;
    family: "Helvetica Neue", Arial, sans-serif;
  };
  text-transform: uppercase;
}

p {
  @extend %large-bold-copy;
  font-size: 2.66667em;
}

%large-bold-copy {
  @extend b;
}

.foo {
  border: 1px solid red;
  b {
    @extend %large-bold-copy;
    color: white;
  }
}

here is the error

The font-size for the element with a class of 'large-bold-copy' isn't correct! You need to use the %large-bold-copy placeholder in a rule for .large-bold-copy elements.

I have tried so many different things and nothing is working. Sorry if I sound stupid but the video made this concept sound so complicated that understanding this question is scratchy at best. He didn't do a very good job at explaining this concept

2 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Hey Wendell, you have to create a placeholder and then extend it.

%large-bold-copy {
  text-transform: uppercase; /* Can be anything. */
}

b {
  @extend %large-bold-copy;
  font: {
    weight: bold;
    size: 3.8333em;
    family: "Helvetica Neue", Arial, sans-serif;
  };
  text-transform: uppercase;
}

p {
  @extend b;
  @extend %large-bold-copy;
  font-size: 2.66667em;
}

.large-bold-copy {
  @extend b;
  @extend %large-bold-copy;
}

.foo {
  border: 1px solid red;
  b {
    color: white;
  }
}
Wendell Pulsipher
Wendell Pulsipher
10,183 Points
Wendell Pulsipher
Wendell Pulsipher
10,183 Points

ahh.. ok thanks.. sorry again for my ignorance.. it seemed like it was asking for just edit what was already there instead of writing more code