CSS 확장 기능이 예상대로 작동하지 않습니다.

Question

확장 기능을 사용하여 스타일을 설정했습니다. 문제는 특정 상황에서 작동하지 않고 논리적으로 보이지 않는 것입니다.

CSS를 단순화했지만 문제는 여전히 동일합니다. 다음은 중첩 된 클래스입니다.

#how-it-works { 
    .timeline { 
     & > .timeline-step { 

      & > h3:extend(.h3-text) {} 
     } 
    } 
} 

위의 인스턴스에서 LESS는 CSS를 출력하지 않습니다. 나는이 같은 외부 층 제거하면

그러나 :

.h3-text, 
h3:not([class]), 
.timeline > .timeline-step > h3, 
.legal-info dt, 
.call-to-action .rapr { 
    color: #424242; 
    font-size: 20px; 
    line-height: 28px; 
} 

외부 스타일 클래스인지 여부는 중요하지 않습니다 나 :

.timeline { 
    & > .timeline-step { 

     & > h3:extend(.h3-text) {} 
    } 
} 

를 I 출력이 내가 필요 얻을 신분증.

누구나 상황에 불을 붙이시겠습니까?

Answer 1

이것은 매우 이상한 종류의 행동이며 현재이 방법으로 작동하는 이유에 대해서는 설명 할 수 없지만 해결 방법이 있습니다. 실제 중첩 된 selector (가장 안쪽의 selector 제외) 이전의 모든 수준에서 부모 selector (&)를 사용하면 작동하는 것 같습니다.

기능이 얼마나 오래 있었고이 시나리오가 얼마나 일반적인지를 고려하면 의도 한 기능 일 수 있습니다. 내가 그것을 찾기 위해 관리 일단 나는 이유에 대한 자세한 설명을 추가합니다 :)

.h3-text{ 
    color: #424242; 
    font-size: 20px; 
    line-height: 28px; 
}  
#how-it-works { 
    & .timeline { 
     & > .timeline-step { 
      & > h3:extend(.h3-text) {}; 
     } 
    } 
} 

---

모든 수준에서 & (부모 선택)을 방지하는 것입니다 작동하는 것 같다 또 다른 방법입니다. &은 기본적으로 아무 것도하지 않기 때문에이 특정 시나리오에서는 큰 문제가 아니어야합니다.

.h3-text{ 
    color: #424242; 
    font-size: 20px; 
    line-height: 28px; 
}  
#how-it-works { 
    .timeline { 
     > .timeline-step { 
      > h3:extend(.h3-text) {}; 
     } 
    } 
} 

---

규칙 집합의 작품 내부에도 :extend은. 선택기에 연결된 :extend이 사용되고 선택기가 일부 레벨에서만 & 인 경우 문제가 발생하는 것처럼 보입니다.

.h3-text{ 
    color: #424242; 
    font-size: 20px; 
    line-height: 28px; 
} 
#how-it-works { 
    .timeline { 
     & > .timeline-step { 
      & > h3 { 
       &:extend(.h3-text); 
      } 
     } 
    } 
}