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 Sass Basics (retired) Getting Started with Sass Advanced Nesting

Katherine Wakefield
PLUS
Katherine Wakefield
Courses Plus Student 4,154 Points
Posted by Katherine Wakefield
Katherine Wakefield
Courses Plus Student 4,154 Points

It makes no sense

It is nice to get the creator of the language to teach this course, however he is assuming WAY TOO much far too fast for newbies. I have been to code school and was able to learn Git in a day. I have been at this one example for an hour. The hints are seriously not helping and neither is going to the sass documentation on post-selector ampersand.

3 Answers

Nick Brooks
Nick Brooks
2,780 Points
Nick Brooks
Nick Brooks
2,780 Points

It takes some getting used too. I got stuck on one or two sections after joining a few days ago - sometimes it could help you googling some stuff just to get a full understanding of something explained slightly hazy.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Katherine,

How much css experience did you have coming into this? I imagine it would probably be hard to learn sass if you were also learning css at the same time. This is listed as an intermediate course and it's the last course you take in the front end track. So I think that treehouse is assuming a certain amount of prerequisite knowledge to take this course.

You should have posted what you had so far for task 4. There may not be any problem at all with your understanding of it. The challenge is a little picky with the specificity of the selector in task 4.

Were you able to figure out what the final compiled selector should be but just having trouble with how to use the parent selector & to achieve that?

As far as the documentation is concerned, I'm not sure if post-selector ampersand is an official name so you may have come up short searching for that. What the challenge is trying to indicate is that the & should come after another selector.

The relevant part of the documentation is here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

The 1st example illustrates what task 4 is looking for. In particular, the selector body.firefox & and what it compiles to body.firefox a

I hope this gets you going again.

Katherine Wakefield
PLUS
Katherine Wakefield
Courses Plus Student 4,154 Points
Katherine Wakefield
Katherine Wakefield
Courses Plus Student 4,154 Points

I know the basic every day CSS for 10 years now. Sass is stretching the brain with all the variables. It is probably stumping me since I have avoided Javascript like the plague.

So what I can gather from trying to wrap my head around the answer to this example: div.footer & { color:purple; }

Means that the & symbol itself is a variable for the parent declaration above it and can go ANYWHERE in the next declaration.

Had I seen: div.footer a { color: purple; }

It would be clear. Now it makes sense. Have I got the understanding right?

Thanks

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

The & selector always represents the fully resolved parent selector. Not just the parent directly above but all the way up to the top level of nesting.

In this challenge part of the scss was:

p {
  a {
    div.footer & {
      color: purple;
    }
  }
}

Here the & represents p a not just a. You have to go all the way up the nesting to figure out what the parent selector is. So the final compiled selector is div.footer p a

It can go ANYWHERE as long as it's going to be creating a valid selector.

Basically you want to use the & when you want something other than the default behavior. The default behavior is to create a descendent selector.

The following are equivalent:

p {
  a { /* the default behavior is to create a descendent selector: 'p a' */
    color: blue;
  }
}

p {
  & a { /* Here the & represents 'p' so the selector created is 'p a'  The & is redundant in this case because it matches the default behavior */
    color: blue;
  }
}

I hope this helps clear it up for you.

Let me know if you have any questions about this.