SASS oder SCSS Verwendung von kaufmännisches Und

Question

Wie kann ich das mit SASS/SCSS tun?

sass:

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

Es sollte die folgende CSS produzieren:

.orange { 
    color: #ffa500; 
} 

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

Ich kann es tun, indem & als Variable verwenden, aber es erfordert @at-root und es ist nicht wirklich lesbar/schön:

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

Bei alleiniger Verwendung & Selektor funktioniert gut, aber scheint aber die Sprache nicht erlaubt es so zu verwenden, wie ich will. Irgendeine Idee?

Answer 1

"&" may only be used at the beginning of a compound selector.

DOCS

Aber Sie können Ihre Schaltfläche, um eine Klasse geben und sie nach den DEMO

$orange: orange 

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