Klassenbasierte Bedingung SCSS/SASS

Question

Ich möchte eine Farbe basierend auf der Vorgängerklasse ändern. Was ich will, in CSS erhalten:

section.container-story .story-head .content h2 { 
    color:#FF0000; 
} 
section.container-story.category_1 .story-head .content h2 { 
    color:#00FF00; 
} 

Mein SCSS Code

section.container-story{ 

    $story-color: #FF0000; 

    .story-head{ 

     .content{ 

      h2{ 
       color: $story-color; 

       .category_1 &{ 
        color: #00FF00; 
       } 
      } 
     } 
    } 
} 

Gibt es eine Möglichkeit, dies zu erreichen?

Hier ist mein nicht arbeiten Stift: https://codepen.io/will83/pen/pwNzzQ

Danke

Answer 1

einfach die & Zeichen.

$story-color: #FF0000; 

.story-head{ 
    .content{ 
    h2{ 
     section.container-story &{ 
     color: $story-color; 
     } 
     section.container-story.category_1 &{ 
     color: #00FF00; 
     } 
    } 
    } 
}