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

Shana Gibson
Shana Gibson
8,788 Points
Posted by Shana Gibson
Shana Gibson
8,788 Points

sass

so confusing, hardly understand any of it, im just very slow! is anyone else working on it??

Shana Gibson
Shana Gibson
8,788 Points
Shana Gibson
Shana Gibson
8,788 Points

im stuck on the 4th challenge on the first stage, its asking me this:

We want to add an exception for <a> tags that are are in the <div> with a class of .footer: those links should be purple. Use the post-selector ampersand to achieve this.

2 Answers

Erik Nemesis
Erik Nemesis
13,356 Points
Erik Nemesis
Erik Nemesis
13,356 Points

Okay, simply put, the ampersand selector is asking as a reference to the current rule worked on. In other languages, a similar object would be "this", such as in Javascript.

Let's do an example, let's say you are working on the #header, and you want to set its color to red. This would give:

#header {
  color: red;
}

Now, let's decide that you want to give the color blue instead, but only when the header has an additional class called "header-blue". In regular CSS, you would achieve this by creating a new rule #header.header-blue, as so:

#header.header-blue {
  color: blue;
}

Now in SASS you have a better, concise way to do that while keeping your code clear, by using the ampersand:

#header {
  color: red;

  // This is like "when this element (#header) has a class "header-blue", then:
  &.header-blue {
    color: blue;
  }
}

There are many other uses for the ampersand selector, like "has an ancestor of" or "has a pseudo-class of", but you will certainly see it other courses (I didn't take it by the way, so I don't know whether the course is good or not)