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

Máté Végh
Máté Végh
25,607 Points
Posted by Máté Végh
Máté Végh
25,607 Points

How would you translate this from CSS to SCSS?

Hey guys,

So here is the CSS output I'm looking for:

@media (min-width: 768px) {
  .item,
  .item:hover,
  .item:focus {
    color: white;
  }
  .item:hover,
  .item:focus {
    background-color: red;
  }
}

And this is how I tried in SCSS:

.item {
  @media (min-width: 768px) {
    %placeholder {color: white;}
    @extend %placeholder;
    &:hover, &:focus {
      @extend %placeholder;
      background-color: red;
    }
  }
}

Since you can't @extend outers selectors from within @media blocks, I've put the %placeholder inside the @media, but that causes an issue. Here is the output:

@media (min-width: 768px) {
  .item .item {
    color: white;
  }
  .item:hover, .item:focus {
    background-color: red;
  }
}

The task is to get the exact same output as above.

I will really appreciate your help!

6 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Matt,

How about this, its as close as i can get and there are no compile errors.

@media (min-width: 768px) {
  .item, 
  .item:hover, 
  .item:focus {
    color: white;
  }
  .item:hover, 
  .item:focus {
    background-color: red;
  }
}

Scss is.

.item {
  @media (min-width: 768px) {
    &,
     &:hover, &:focus {color: white;}

    &:hover, &:focus {

      background-color: red;
    }
 }
}
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Matt,

This Scss:

.item {
  @media (min-width: 768px) {
    %placeholder {color: white;}

    &:hover, &:focus {
      @extend %placeholder;
      background-color: red;
    }
 }
}

Will produce:

@media (min-width: 768px) {
  .item .item:hover, .item .item:focus {
    color: white;
  }
  .item:hover, .item:focus {
    background-color: red;
  }
}

Is that what your looking for? If so, you had it, you just had an extra @extend %placeholder; in there.

Hope this helps.

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Hey Wayne,

Nope, this is not the one I am looking for. Again, the output what I'm looking for is this:

@media (min-width: 768px) {
  .item,
  .item:hover,
  .item:focus {
    color: white;
  }
  .item:hover,
  .item:focus {
    background-color: red;
  }
}

Thanks for trying!

Carlos Quivera
Carlos Quivera
6,917 Points
Carlos Quivera
Carlos Quivera
6,917 Points

I've been trying many ways to solve this but unfortunately I could not because Sass doesn't allow cross-media extensions since you are actually moving selectors around, I think the only way to do this is:

.item {
  @media (min-width: 768px) {
    & {
    color: white;
  }
}
    &:hover,
    &:focus {
    color: white;
    background-color: red;
  }
}

I know it's not what you are looking for, but that's the best I can do.

Good luck!

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Nice job Wayne, this is it!

In the meantime I was experimenting too and reached out to this:

.item {
  @media (min-width: 768px) {
    color: white;
    &:hover, &:focus {
      @extend .item;
      background-color: red;
    }
  }
}

This does the same output, but I'll take your code because it's way more simple.

Thanks buddy!

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

No probs Matt,

Glad to help, got my grey matter working overtime for a bit & gave me a excuse not to watch the chick flick with the girlfriend ;)