css - 如何在＆的sass插值中获得直接父级

Question

有没有办法使用 {$} 获取最直接的父级？ 在下面的例子中，'&#{&}' 没有像我预期的那样工作，我设法使用 mixin 解决了这个问题。

@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;
    }
  }
}

编译为:

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

Answer 1

我觉得这个结构有点奇怪——但你可以这样做:

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

...或使用选择器追加

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

都编译为:

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