CSS 'lookbehind'는 sass/less를 사용합니다.

Question

현재 CSS를 구조화하는 데 sass를 사용하고 있습니다. 하찮은 주어진 아래.

.container { 
    .list { 
     .selected { 
      background-image : url('highlighted.png'); 
     } 
    } 
} 

그러나 나는 또한 모더 나이저 (http://modernizr.com/docs/를) 사용 가능한 CSS3를 활용하려는입니다. 이 예제에서는 border-radius의 가용성을 테스트하고 배경 이미지가 아닌 border-radius을 사용하려고합니다. 따라서 html 요소에 borderradius 클래스가 있는지 확인해야합니다. 뒤에 어떤 종류의 표정을 사용하여 이것을 달성 할 수 있습니까? 아니면이 .borderradius 클래스와 코드를 다시 반복해야 할, 최종 결과는 다음과 인 : 나에게

.container { 
    .list { 
     .selected { 
      background-image : url('highlighted.png'); 
     } 
    } 
} 

.borderradius .container { 
    .list { 
     .selected { 
      background : yellow; 
      border-radius : 10px; 
     } 
    } 
} 

이 큰 프로젝트에 유지하기 위해 지저분하고 어려운 보인다. 누구든지 이것을 달성하는보다 우아한 방법이 있습니까?

Answer 1

이 같은 앰퍼샌드 (&)를 사용하여 부모 선택기를 참조 할 수 있습니다 :

.container { 
    .list { 
     .selected { 
      background-image : url('highlighted.png'); 
      .borderradius & { 
       background : yellow; 
       border-radius : 10px; 
      } 
     } 
    } 
} 

이 어떤 컴파일에 :

.container .list .selected { 
    background-image : url('highlighted.png'); 
} 

.borderradius .container .list .selected { 
    background : yellow; 
    border-radius : 10px; 
} 

체크 아웃 this article, 또는 this one보다 깊이에 대한 유용 할 수있는 방법에 대한 설명 :

... 전자 후행 앰퍼샌드 (&) 반복 선택 대신에 당신의 선택 선언의 끝에 문자, 그리고