앰퍼샌드를 사용할 때 구문 부모를 어떻게 대상으로합니까?

Question

내 scss 선택기에서 일부 중복을 제거하려고합니다.

.container { 
    .operation { 
    color: green; 
    } 
    .row.is-active &, 
    .row:hover & { 
    .operation { 
     color: inherit; 
    } 
    } 
} 

I는 다음과 같이 다시 작성 시도 :

.container { 
    .operation { 
    color: green; 
    } 
    .row & { 
    &.is-active, &:hover { 
     .operation { 
     color: inherit; 
     } 
    } 
    } 
} 

을하지만,이 .is-active이 .container 대신 앰퍼샌드를 사용하는 경우

.row가 어떻게이 구문 부모를 타겟팅 할 수 있습니다에 적용되는 원인은?

Answer 1

처음에 잘못 이해 했으므로 시간을내어 다시 질문에 답변했습니다. 불행하게도 현재 SASS에서이 작업을 수행 할 수있는 방법은 없습니다. 선택기와 문자열을 조작하기 위해보다 진보 된 SASS functions을 사용하려고 할 때도 가능하지 않습니다.

Stylus를 사용 할 수 있습니다 좋은 소식

있습니다. codepen에 라이브 Example을 생성했습니다.

// Stylus - not SASS 
    .container { 
    .operation { 
     color: green; 
    } 
    .row { 
     ^[-1..-1]:is-active ^[0], ^[-1..-1]:hover ^[0] { 
     .operation { 
      color: inherit; 
     } 
     } 
    } 
    } 

나는 그것이있는 옵션을 제공 할 수 있습니다 이것은 적어도, 어떤 방법으로 당신이 도움이되기를 바랍니다,하지만 불행히도 SASS 당신이 시도하고 무엇을 달성 할 수 없다.