Question

有没有办法使用{$}来获得最直接的父母？在下面的示例中＆＃39;＆amp;＃{＆amp;}＆＃39;没有像我预期的那样工作，我设法使用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

这个结构对我来说有点奇怪 - 但你可以这样做：

/home/david/Desktop/myproject/main.cpp:6: undefined reference to `YAML::LoadFile(std::__cxx11::basic_string<char, std::char_traits<char>, std::allocator<char> > const&)' ...

...或使用选择器追加

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

如何在＆amp; sass插值中获得直接父级

1 个答案: