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;}
      .fa-location-arrow {color: $blue-light;}
      .fa-heart-o {
        color: $pink;
        &:before {content: "\f004";}
      }
      span {
        color: inherit;
        font-weight: bold;
      }
    }
}

Here is the html

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