css - 这个mixin是什么意思？

Question

在 scss 文件中，我看到了下面的代码片段:

@mixin myMixin() {
    :global(.rtl) & {
        @content;
    }
}

我了解关键字 @mixin 以及 @content 并尝试通过此链接了解 :global() : What does :global (colon global) do? .

但我不确定“&”在这里做什么或整个 mixin 做什么。

Answer 1

与号 (&) 是用于嵌套的组合符，在本例中它用于限定选择器。

举个一般的例子:

// This Sass...
.foo {
  .bar & {
    color: red;
  }
}

// ...would compile to this CSS
.bar .foo { color:red; }

在您的示例中，mixin 声明替换了 .foo，并且看起来像:

// If you called your mixin at .bar
.bar {
  @include myMixin {
    color: red;
  }
}

// It should compile to something like this
:global(.rtl) .bar { color: red; }

关于 ampersands and qualifying selectors in this CSS Tricks article 的更多详细信息.