SCSS 중첩구조 이해 : 중첩

 

                                <div class="grid-area aic fdc">
                                    <div class="btn-area w50p">
                                        <button type="button" class="btn btn-detail-search btn--white" title="고급검색"
                                            id="btnDetail">
                                            <div class="btn-desc grid-detail">고급검색 열기</div>
                                            <div class="btn-desc grid-detail off">고급검색 닫기</div>
                                            <div class="btn-img grid-detail off"></div>
                                        </button>
                                    </div>
                                </div>

 

SCSS

.btn-desc {
            flex: none;
            .grid-detail{
                .off{
                    display:none !important;
                }
            } 
        }

 

CSS

.btn-area .btn-detail-search .btn-desc .grid-detail .off {
  display: none !important;
}

 

상기 구조로 진행할경우 정상적으로 조회가 안됨 & 부모선택자 안으로 자식을 가져온다. 라고 착각했음.

.btn-desc {
            flex: none;
            &.grid-detail{
                &.off{
                    display:none !important;
                }
            } 
        }

 

.btn-area .btn-detail-search .btn-desc.grid-detail.off {
  display: none !important;
}