IT

LESS의 빠른 인 하위 선택기

lottoking 2020. 8. 3. 17:26
반응형

LESS의 빠른 인 하위 선택기


어쨌든 LESS가 즉시 하위 선택기 (>)를 ​​출력에 적용하게 있습니까?

내 style.less에서는 다음과 같이 작성하고 싶습니다.

.panel {
    ...
    > .control {
        ...
    }
}

LESS가 다음과 같은 것을 생성하게하십시오.

.panel > .control { ... }

최신 정보

사실, 원래 질문의 코드는 작동합니다. 당신은 그냥 막대기 수 있습니다 >.


답을 찾았습니다.

.panel {
    ...
    >.control {
        ...
    }
}

">"와 "."사이에 공백이 작동하지 않습니다.


공식적인 방법 :

.panel {
  & > .control {
    ...
  }
}

& 항상 현재 선택을 나타냅니다.

http://lesscss.org/features/#features-overview-feature-nested-rules를 참조 하십시오


'&'를 사용하는 동안 올바른 구문은 다음과 가변합니다.

.panel{
   > .control{
   }
}

약간의 언급 에 따르면 '&'는 조상을 사용하는 변수화하는 데 사용됩니다 (그러나 여기에는 필요하지 않습니다). 에서 이 덜 예를 들어 , & : 호버은 필수 끝난 : 호버 오는가 않으면 구문 오류가 발생합니다. 그러나 여기에 '&'를 사용하는 데 필요한 구문 요구 사항은 없습니다. 모든 중첩은 중첩이 필요합니다.


당신은 첫 번째로 첫 번째 당신은 요소를 대상으로하는 경우 또한, <td>의를 <tr>, 다음과 같이 사용할 수 있습니다 :

tr {
    & > td:first-child {font-weight:bold;}
}

이렇게하면 필요하지 않은 클래스를 사용할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/8110286/immediate-child-selector-in-less

반응형