CODEWITHSUNDEEP
csssassscss-mixins
bunny
bunny

Reputation: 2037

What does this mixin mean?

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.

Upvotes: 1

Views: 101

Answers (1)

code and pixels
code and pixels

Reputation: 674

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.

Upvotes: 1

Related Questions