css - SASS：内容块混合（或占位符），它采用上下文选择器并将它们附加到混合中的选择器

Question

我想做这样的事情：

@mixin context($size) {
  body.#{$size} {
    @content
  }
}

div {
  span {
    font-size: 2em;
    @include context('large') {
      & {
        font-size: 5em;
      }
    }
  }
}

生产：

div span {
  font-size: 2em;
}

body.large div span {
  font-size: 5em;
}

它实际上（可预测地）产生了什么：

div span {
  font-size: 2em;
}

div span body.large {
  font-size: 5em;
}

我可以在不同的 mixin 中复制选择器，但考虑到选择器可能很复杂，这会产生很多额外的垃圾：

@include context('large') {
  div {
    span {
      font-size: 5em;
    }
  }
}

我可以将选择器制作成 mixins，这样我就不必每次都重复它们，但是......

有没有办法使用占位符（可能与 mixins 结合使用）在上面的前两个代码块中获得我想要的东西？

Answer 1

您只需将 移动&到 mixin 的一部分：

@mixin context($size) {
  body.#{$size} & {
    @content
  }
}

div {
  span {
    font-size: 2em;
    @include context('large') {
        font-size: 5em;
    }
  }
}

输出：

div span {
  font-size: 2em;
}

body.large div span {
  font-size: 5em;
}

从 Sass 3.4 开始，您可以将其编写为在选择器内部和文档根目录中工作：

@mixin optional-at-root-nest($sel) {
    @at-root #{if(not &, $sel, selector-nest($sel, &))} {
        @content;
    }
}

@mixin context($size) {
    @include optional-at-root-nest('body.#{$size}') {
        @content
    }
}

div {
    span {
        font-size: 2em;
        @include context('large') {
                font-size: 5em;
        }
    }
}

@include context('large') {
    font-size: 2em;
}