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

Michael Escoto
Michael Escoto
30,028 Points
Posted by Michael Escoto
Michael Escoto
30,028 Points

Sass Placeholder Challenge

I'm stuck on this challenge and I'm not sure what the problem is. It seems to work when I try it on SassMeister but it's not working here. 

%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;
}

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

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

1 Answer

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hey Michael,

You swapped out the b selector for your placeholder selector, but the challenge just wants you to make a new placeholder and @extend it into b, p, and .large-bold-copy.

So you can give the placeholder random properties and values if you want, like

%large-bold-copy {
  color: blue;
}

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;
  }
}

or you can leave it empty and specify the extend as optional, allowing it to fail (because the placeholder is empty and Sass won't be able to do anything with it), like this:

%large-bold-copy {
}

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

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

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

.foo {
  border: 1px solid red;
  b {
    color: white;
  }
}