CODEWITHSUNDEEP
sass
dmzkrsk
dmzkrsk

Reputation: 2115

scss: check parent selector name in mixin

Is there a way to check what & refers in mixin?

body {
  @import x
}

button {
  @import x
}

Inside @mixin x() I want a special case when it's called with body as &.

Upvotes: 0

Views: 31

Answers (1)

Amaury Hanser
Amaury Hanser

Reputation: 3456

You can check the value of & in your mixin using @if {} @else {}:

@mixin test {
    $root: #{&};
    $parentTagIsBody: $root == 'body'; 
    
    @if $parentTagIsBody {
        color: red;
    } @else {
        color: black;
    }
}

button {
  @include test;
}

body {
  @include test;
}

will compile to:

button {
  color: black;
}

body {
  color: red;
}

Upvotes: 1

Related Questions