1

私はこのようなことをしたい:

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

さまざまなミックスイン内でセレクターを複製することもできますが、セレクターが複雑になる可能性があることを考えると、余分なジャンクがたくさんあります。

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

セレクターをミックスインにすることもできるので、毎回繰り返す必要はありませんが...

上記の最初の 2 つのコード ブロックで必要なものを取得するために、おそらくミックスインと組み合わせてプレースホルダーを使用する方法はありませんか?

4

1 に答える 1