Deep Selectors (딥 셀릭터)

 

Scoped CSS | Vue Loader

또 한 이곳도 

 

Scoped CSS, deep selector

 

 

Deep Selectors

부모 컴퍼넌트에 있는 엘리먼트 뿐만 아니라 자식 컴퍼넌트에도 동일한 클래스명이 있다면 전부 적용

CSS 에서 사용 하는 방법

 

.parent-class >>> .child-class { /* ... */ } // 1번째 사용 방법 
.parent-class[data-v-f3f3eg9] .child-class { /* ... */ } // 2번째 사용 방법
 
 

 

 

 

SCSS 에서 사용하는 방법

.parent-class { // 1번째 사용 방법 : 이 방법은 deprecated 될 예정이라 2번째 사용 방법으로 사용하자 
& /deep/ .child-class { 
background-color: #000; 
   }
 } 
.parent-class { // 2번째 사용 방법 
&::v-deep .child-class {
 background-color: #000;
   }
 }
 

 

 

 

Sass와 같은 일부 전처리 기는 >>>제대로 구문 분석 하지 못할 수 있습니다 . 이러한 경우에는 /deep/또는 ::v-deep조합 자를 대신 사용할 수 있습니다. 둘 다 별칭 >>>이며 정확히 동일하게 작동합니다. 위의 예를 기반으로이 두 표현식은 동일한 출력으로 컴파일됩니다.