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

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

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

我可以将选择器变成mixins，所以我不必每次都重复它们，但是......

是否有办法使用占位符，可能与mixin结合使用，以便在上面的前两个代码块中得到我想要的内容？

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

SASS：内容块mixin（或占位符），它接受上下文选择器并将它们附加到mixin中的选择器

1 个答案: