1

In a scss file, I saw the below code snippet:

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

I understand the keywords @mixinas well as @content and tried to understand :global() from this link: What does :global (colon global) do?.

But I am not sure what "&" does here or what this whole mixin does.

Trevor Reid
  • 3,310
  • 4
  • 27
  • 46
bunny
  • 1,797
  • 8
  • 29
  • 58

1 Answers1

1

The ampersand (&) is a combinator used in nesting and in this case it is being used to qualify a selector.

For a general example:

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

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

In your example, the mixin declaration replaces .foo, and would look like:

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

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

More details about ampersands and qualifying selectors in this CSS Tricks article.

code and pixels
  • 644
  • 7
  • 13