Verwenden von Sass zum Ändern der Klasse

Question

Ich versuche die Tags auszugrauen (Erfolg und empfohlen für die letzten 2 Boxen) und sie nur dann farbig zu machen, wenn sie über oder aktiv sind (die erste Box).

Ich benutze die graue Farbe als ein deaktivierter Zustand, obwohl es gerade grau mit CSS verwendet.

Ich versuche dies in reinem CSS mit SASS und nicht mit CSS Fitler, wie ich IE Browser zielen müssen.

Könnte ich in SASS ein Mixin oder eine True oder False-Anweisung erstellen, um eine graue Klasse zu deaktivieren, um die Farbe im Status "Schwebend" oder "Aktiv" auf dem Elternelement anzuzeigen?

Die Tags sind 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>&nbsp;</p> 
      </div> 
      <div class="main"> 
       <span>&nbsp;</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

Wenn ich Ihre Frage richtig gelesen habe, denke ich, Sie eine etwas falsche Vorstellung davon haben kann, was SASS tut. Ich werde versuchen, so gut ich kann zu antworten;

SASS ist einfach ein Zucker-Layer, egal welche Funktion oder Mix-In Sie in einer Sass-Datei haben, es wird immer kompiliert und eine .css-Datei, Seine Fähigkeit, den Browser zu beeinflussen ist zu 100% beschränkt die genauen standards von css, also wenn css es tun kann, ist es möglich, wenn css nicht kann, sass wird dir nicht helfen.

In diesem Sinne ist die Farbänderung bei Hover kein Problem, und Ihr Code scheint darauf hinzuweisen, dass Sie dies bereits erreicht haben.

Wie für die ausgewählte Farbe gibt es einfach keine Möglichkeit, Sie müssen die .selected Klasse zum HTML hinzufügen. Dies wird offensichtlich die Farbänderung von der zugeordneten Klasse auslösen.

Hoffentlich hilft mir meine Antwort.