Wie bekomme ich die direkte Eltern in Sass-Interpolation von &

Question

Gibt es eine Möglichkeit, {$} zu verwenden, um die direkteste Eltern zu erhalten? Im Beispiel unten '& # {&}' funktioniert nicht wie erwartet, ich habe es mit Mixin umgehen können.

@mixin modifier($modifier, $block: &) { 
    &#{"."+$block}--#{$modifier} { 
     @content; 
    } 
} 
.namespace{ 
    $button : 'btn'; 
    .#{$button} { 
    line-height: 1; 
    @include modifier('big', $button){ // working but not clean 
     padding-top: 8px; 
    } 
    &#{&}--big{ // not working as {&} is interpolated to namespace .btn 
     padding-top: 12px; 
    } 
    } 
} 

zusammengestellt:

.namespace .btn { 
    line-height: 1; 
} 
.namespace .btn.btn--big { 
    padding-top: 8px; 
} 
.namespace .btn.namespace .btn--big { 
    padding-top: 12px; 
} 

Answer 1

Das Konstrukt, das ein bisschen seltsam für mich sieht - aber man konnte es gerne tun:

.namespace { 
    $class: ".btn"; 
    #{$class} { line-height: 1; } 
    #{$class}#{$class}--big { padding-top: 8px; } 
    & #{$class}#{&} #{$class}--big { padding-top: 12px; } 
} 

... oder Selektor anhängen mit

.namespace .btn { 
    line-height: 1; 
    @at-root { 
    #{selector-append(&,".btn")}--big{ padding-top: 8px; } 
    #{selector-append(&,&)}--big{ padding-top: 12px; } 
    } 
} 

beide kompilieren zu:

.namespace .btn { line-height: 1; } 
.namespace .btn.btn--big { padding-top: 8px; } 
.namespace .btn.namespace .btn--big { padding-top: 12px; }