SASS 또는 SCSS에서 앰퍼샌드 사용

Question

SASS/SCSS로 어떻게 수행 할 수 있습니까?

말대꾸 :

.orange 
    color: $orange 
    button& 
    background: $orange 
    color: black 

그것은 다음과 같은 CSS를 생성해야합니다

.orange { 
    color: #ffa500; 
} 

button.orange { 
    background: $orange; 
    color: black; 
} 

내가 변수로 &를 사용하여 그것을 할 수 있지만 @at-root 필요하고 좋은/정말 읽을 수 없습니다입니다 :

를

.orange: 
    @at root 
    button#{&} 
     color: white 

단독으로 사용하는 경우, & 선택기는 훌륭하게 작동하지만 언어가 원하는대로 사용할 수 없습니다. 어떤 생각?

Answer 1

DOCS

"&" may only be used at the beginning of a compound selector. 그러나 당신은 당신의 버튼 클래스를 제공하고 &

DEMO

$orange: orange 

.orange 
    color: $orange 
    &.button 
    background: $orange 
    color: black