基于类的条件SCSS / SASS

Question

我想根据祖先类改变颜色。 我想在CSS中获得：

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

我的SCSS代码

section.container-story{

    $story-color: #FF0000;

    .story-head{

        .content{

            h2{
                color: $story-color;

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

有没有办法实现这个目标？

这是我的非工作笔：https://codepen.io/will83/pen/pwNzzQ

谢谢

Answer 1

只需使用&字符。

$story-color: #FF0000;

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