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的元素。