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

Posted by Agnes Caringal
Agnes Caringal
6,239 Points

anyone can help me about sass? using ampersand

please help

13 Answers

Colin Bell
Colin Bell
29,679 Points

This challenge is just being picky. You need to explicitly label the footer div.footer, then use the post-selector ampersand.

/* Write your SCSS code below. */

p {
  a {
    color: red;
    div.footer & {
       color: purple;
    }
  }
  > a {
    color: blue;
    &:hover {
      opacity: 0.5;
    }
  }
}
David Bloomfield
David Bloomfield
11,622 Points
David Bloomfield
David Bloomfield
11,622 Points

Hi Agnes

An ampersand is used to reference the parent selector.

e.g. 

h3
  font-size: 20px
  margin-bottom: 10px

  &.some-selector
    font-size: 24px
    margin-bottom: 20px

would render

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
h3.some-selector {
  font-size: 24px;
  margin-bottom: 20px;
}

Hope this helps

David.

Agnes Caringal
Agnes Caringal
6,239 Points

Im on a challenge David Bloomfield but I cant answer challenge 4 (1 up 4 questions)

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

Agnes Caringal
Agnes Caringal
6,239 Points
Agnes Caringal
Agnes Caringal
6,239 Points

thanks David Bloomfield :)

Agnes Caringal
Agnes Caringal
6,239 Points
Agnes Caringal
Agnes Caringal
6,239 Points

thank you so much Colin Bell :) solved :) :) :)

David Bloomfield
David Bloomfield
11,622 Points
David Bloomfield
David Bloomfield
11,622 Points

I think you need to try something like this Agnes

@mixin menu_button ($color, $size){ 
    background: $color; 
    width: $size; 
}

.menu_button{
    @include menu_button (#369, 50px);
    /* Add other styles here */
}
Agnes Caringal
Agnes Caringal
6,239 Points
Agnes Caringal
Agnes Caringal
6,239 Points

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

Agnes Caringal
Agnes Caringal
6,239 Points

Bummer: Please use the ampersand selector for the .footer div.

Please help...

David Bloomfield
David Bloomfield
11,622 Points
David Bloomfield
David Bloomfield
11,622 Points

Hi Agnes Caringal

I think you need to remove the : after the .footer

It should work after you do that

David :)

Agnes Caringal
Agnes Caringal
6,239 Points

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

but still not working :(

David Bloomfield
David Bloomfield
11,622 Points
David Bloomfield
David Bloomfield
11,622 Points

Sorry it should be 

.footer { 
   &.a{ 
       color: purple; 
   } 
}
Agnes Caringal
Agnes Caringal
6,239 Points
Agnes Caringal
Agnes Caringal
6,239 Points

error also David

David Bloomfield
David Bloomfield
11,622 Points
David Bloomfield
David Bloomfield
11,622 Points

Can you paste a link to the question please so I can try and answer it

Thanks

Agnes Caringal
Agnes Caringal
6,239 Points
Agnes Caringal
Agnes Caringal
6,239 Points

Im trapped here!....

Use the mixin on a class called .menu_button. Set the background color to be #369 and the size to be 50px.

@mixin menu_button ($color: #369, $size: 50px){ background: $color; width: $size; }

Agnes Caringal
Agnes Caringal
6,239 Points
Agnes Caringal
Agnes Caringal
6,239 Points

Colin Bell what's wrong with my code?

Agnes Caringal
Agnes Caringal
6,239 Points
Agnes Caringal
Agnes Caringal
6,239 Points

thanks David Bloomfield :) im done with that. thank you so much

David Bloomfield
David Bloomfield
11,622 Points

Any time :)