CSSオーバーレイが表示されない

Question

私はモーダルとCSSをオーバーレイに使用していますが、動作させたくないようです。何が起きているのでしょうか？

これは、HTML 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; 
    } 
} 

を書かれている：

<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という要素に一致するように探しています。.modal-overlay。