말대꾸 앰퍼샌드 나는이 같은 일부 말대꾸이 클래스

Question

에 태그를 추가합니다 :

.zbounce1, .zbounce2, .zbounce3, .zbounce4 
    animation-name: bounceIn 
    animation-duration: .5s 
    animation-timing-function: ease-in-out 

span.zbounce1, span.zbounce2, span.zbounce3, span.zbounce4 
    display: inline-block 

내가 첫 번째 부분의 중첩 된 비트 두 번째 부분을 simplyfy하고 싶은, 그래서 모든 말할 필요가 없습니다 다시 학급 :

span.& 
     display: inline-block 

슬프게도, 이것은 합법적이지 않습니다. (중첩 &.anotherClass에 스타일의 무리를 전문으로 라운드 다른 방법은, 일부 펑키 말대꾸의 연결 ...?

어떤 해결 방법은 @extendOnly-Placeholder?에 아마 (? 이것을 달성하기 위해 ... 쉬운) 또는

Answer 1

당신은 원시 sass에서 이것을 구현할 수 있습니다. 조금 복잡합니다. selector-append를 사용하여 모든 선택자에 범위를 추가하고 루트 수준에서 @ at-root를 사용해야합니다 (의미가 있다면? .)도 설명하기 어려운 기본적으로는 다음과 같습니다

.zbounce1, .zbounce2, .zbounce3, .zbounce4 { 
    animation-name: bounceIn; 
    animation-duration: .5s; 
    animation-timing-function: ease-in-out; 
    @at-root #{selector-append(span, &)} { 
    display: inline-block; 
    } 
} 

W HICH해야 출력이 결과 : 여기

.zbounce1, .zbounce2, .zbounce3, .zbounce4 { 
    animation-name: bounceIn; 
    animation-duration: .5s; 
    animation-timing-function: ease-in-out; 
} 
span.zbounce1, span.zbounce2, span.zbounce3, span.zbounce4 { 
    display: inline-block; 
} 

이야 Codepen example (당신은 내가 그것을 설명하는 방법을 다른 모르겠어요, 출력을보고 소스를 확인하고 헤더에 스타일 블록을 찾아해야하지만 희망 이 도움이) 내가 원하는

Answer 2

신사 숙녀 여러분 ...

.zbounce, .zbounce1, .zbounce2, .zbounce3, .zbounce4, .zbounce5 
    ... 
    @at-root #{selector-append(span, &)} 
     display: inline-block 

나를 점점!

을 right - - 개

덕분에 the으로 나를 가리키는 위해 @ovokuro합니다!