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 Devin Scheu
Devin Scheu
66,191 Points

Help With Sass

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

My Code:

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

p {
  @extend b;
  font-size: 2.66667em;
}

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

.foo {
  border: 1px solid red;
  b {
    color: white;
  }
}
Nicholas Olsen
.a{fill-rule:evenodd;}techdegree
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Points

What part of this are you having difficulty with?

Devin Scheu
Devin Scheu
66,191 Points

I dont understand it, ive watched the video and tried various place holders and i cant seem to figure it out.

3 Answers

CJ Williams
CJ Williams
34,372 Points

Devin,

I was fairly hung up on this challenge as well. The question wasn't really worded in a way that made sense. Here is the final working code that I came up with:

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

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

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

.foo {
  border: 1px solid red;
  b {
    color: white;
  }
}
CJ Williams
CJ Williams
34,372 Points

My problem was that I was deleting the class .large-bold-copy when I converted it to a placeholder.

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Devin,

This challenge is a bit confusing as it doesn't tell you what to call the placeholder until you check your code, do that and it will make more sense.

Hint: The placeholder is called %large-bold-copy

Stephen O'Connor
Stephen O'Connor
22,291 Points
Stephen O'Connor
Stephen O'Connor
22,291 Points

This question is terribly confusing and needs to be updated.