Using Sass to change class - css

Question

I'm trying to grey out the tags (success and recommended on the last 2 boxes) and have them colored only when they are hovered over or active (the first box).
I'm using the gray colour as a disabled state although its just styled gray using css.
I'm trying to do this in in pure CSS using SASS and not using css fitler as I need to target IE browsers.
Could I create a mixin or a true or false statement in SASS to unset a class that is gray to show the colour in its hovered or active state on the parent or something?
The tags are bootstrap.
<div class="row">
<div class="col-md-3">
<div class="sau-select selected">
<div class="header">
<h4>Self Managed</h4>
<p>label</p>
</div>
<div class="main">
<div class="tag tag-success">Success</div>
<p>Included</p>
</div>
</div>
</div><!-- /col-md-3 -->
<div class="col-md-3">
<div class="sau-select error">
<div class="header">
<h4>Self Managed</h4>
<p> </p>
</div>
<div class="main">
<span> </span>
<p>Included</p>
</div>
</div>
</div><!-- /col-md-3 -->
<div class="col-md-3">
<div class="sau-select">
<div class="header">
<h4>Self Managed</h4>
<p>label</p>
</div>
<div class="main">
<span class="tag tag-warning">Recommened</span>
<p><i class="fa fa-plus" aria-hidden="true"></i> $399.00</p>
</div>
</div>
</div><!-- /col-md-3 -->
<div class="col-md-3">
<div class="sau-select">
<div class="header">
<h4>Self Managed</h4>
<p>label</p>
</div>
<div class="main">
<span class="tag tag-success">Success</span>
<p>Included</p>
</div>
</div>
</div><!-- /col-md-3 -->
</div><!-- /row -->
SASS
.sau-select {
border: 2px solid $sau-gray-mid;
float:left;
width:100%;
text-align:center;
cursor:pointer;
.header{
background-color: $sau-gray-mid;
color:#fff;
padding:7px 0 7px 0;
h4{
font-size:1.1rem;
}
p{
font-size:0.8rem;
padding:0;
margin:-7px 0 0 0;
line-height:18px;
}
}
.main{
color:$sau-gray-mid;
padding:4px 0 15px 0;
p{
padding:0;
margin:0;
}
}
&:hover, &.selected{
border: 2px solid $sau-blue;
.header{
background-color: $sau-blue;
}
.main{
color:$sau-blue;
}
}
&.error{
border: 2px solid $brand-danger;
.header{
background-color: $brand-danger;
}
.main{
color:$brand-danger;
}
}
}

Answer 1

If I've read your question correctly, I think you may have a slightly wrong idea of what SASS does. I'll attempt to answer as best I can;
SASS is simply a sugar layer, no matter what function or mix-in you have in a sass file, it always ends up being compiled and being a .css file, Its ability to effect the browser is 100% limited to the exact standards of css, so if css can do it, it is possible, if css can't, sass will not help you.
So with this in mind, having color change on hover is no problem, and your code appears to suggest that you have already achieved this.
As for the selected color, there simply is no way around it, you must add the .selected class to the HTML. This will obviously trigger the color change from the associated class.
Hopefully my answer helps you.