CSS覆盖不显示

Question

我开始进入Modals和我用于覆盖的CSS，只是似乎不想工作。任何想法可能发生什么？

这是写在SCSS

@mixin transitionSupport($transition){ 
    -webkit-transition: $transition; 
     -moz-transition: $transition; 
     -o-transition: $transition; 
      transition: $transition; 
} 

.modal-overlay{ 
    position: fixed; 
    z-index: 998; 
    top: 0; 
    left: 0; 

    opacity: 0; 

    width: 100%; 
    height: 100%; 

    @include transitionSupport(1ms opacity ease); 

    background: rgb(0,0,0); 

    .modal-open{ 
     opacity: 1; 
    } 
} 

HTML：

<div class="modal-overlay modal-open"> 
</div> 

Link to the codepen

当我查看该页面本身，页面撑白色。我不知道为什么。

.modal-open {opacity：1}是否不覆盖.modal-overlay？

Answer 1

将.modal-open {更改为&.modal-open {以匹配class="modal-overlay modal-open"。

由于它现在写入，它看起来匹配.modal-open INSIDE .modal-overlay的元素。