Zielspezifischer Selektor in SCSS

Question

Gibt es eine Möglichkeit, einen der Vorfahren in der Selektorkette zu ändern?

Dies ist das CSS-I produzieren wollen:

#ViewCardDialog > header::after { 
    // styles 
} 

#ViewCardDialog.blocked > header::after { 
    // blocked styles 
} 

#ViewCardDialog.on-hold > header::after { 
    // on hold styles 
} 

Und ich frage mich, ob so etwas möglich waren:

#ViewCardDialog { 

    > header { 

     &::after { 

      // styles 

      @parent(.blocked) & { 
       // blocked styles 
      } 

      @parent(.on-hold) & { 
       // on hold styles 
      } 
     } 

    } 

} 

Answer 1

Wenn Sie die .blocked und .on-hold Klassen an den Header angebracht, Ihre Eltern Selektoren könnten funktionieren, aber ich denke, mit dem, was Sie haben, wollen Sie dies:

#ViewCardDialog { 
    > header::after { 
      // styles 
    } 
    &.blocked > header::after { 
     // blocked styles 
    } 

    &.on-hold > header::after { 
     // on hold styles 
    } 
} 

Answer 2

#ViewCardDialog { 
    > header{ 
     &:after { 
      // styles 
     } 
    } 
    &.blocked{ 
     > header{ 
      &:after { 
       // styles 
      } 
     } 
    } 
    &.on-hold{ 
     > header{ 
      &:after { 
       // styles 
      } 
     } 
    } 
} 

Answer 3

Vielleicht ist ein bisschen verwirrt Code, aber ist der beste Weg, den ich gefunden habe zu erreichen, dass Sie wollen. Zuerst habe ich eine Variable für die Eltern definieren und dann verwende ich die Funktion ersetzen für die Klasse in der übergeordneten hinzufügen können, müssen auch @at-root Richtlinie Wiederholung des Wählers zu verhindern:

SASS

#ViewCardDialog { 
    $root: &; 
    > header { 
    &::after { 
     color: blue; 
     @at-root #{selector-replace(&, $root, $root+".blocked")} { 
     color: red; 
     } 
     @at-root #{selector-replace(&, $root, $root+".on-hold")} { 
     color: green; 
     } 
    } 
    } 
} 

Ausgang

#ViewCardDialog > header::after { 
    color: blue; 
} 
#ViewCardDialog.blocked > header::after { 
    color: red; 
} 
#ViewCardDialog.on-hold > header::after { 
    color: green; 
}