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 hadleylambeth
hadleylambeth
13,946 Points

Why Doesn't This Work In Sass?

I have an icon and a span tag that when you hover over them the icon changes to one color and the span tag does something else. Pretty simple and it works just fine.

I also need to create an active state class that can be applied after someone has clicked on this icon. My problem is that adding the active class below doesn't work. I had to copy and paste all of the same code out into a new class in order for it to work, but I don't understand why.

My reasoning is that this code will just compile to look for any element with a class of .action and .action-active and then will perform the same css that I get when I hover. What am I missing here?

.action {
  display: block;
  color: inherit;
    &:hover, &:focus, .action-active {
      .fa-check {
        color: $green;
      }
      span {
        color: inherit;
        font-weight: bold;
      }
    }
}

Here is the html

<div class="actions text-md">
  <div class="actions-container">
     <a class="action action-been white-link">
      <i class="fa fa-check"></i>
      <span>Been</span>
     </a>
   </div>
</div>

1 Answer

Micheal Allen
Micheal Allen
19,311 Points
Micheal Allen
Micheal Allen
19,311 Points

if the class .action-active is being added to the same anchor with .action class after clicking, you will need to do the same as what you have done with the &:focus and &:hover by adding an ampersand before .action-active

Example and Fix: 

.action {
  display: block;
  color: inherit;
    &:hover, &:focus, &.action-active {
      .fa-check {
        color: $green;
      }
      span {
        color: inherit;
        font-weight: bold;
      }
    }
}

Which should output this css:

.action.action-active{
// random styling here
}