Clear IDE analysis warning `Cannot find variable` in scss file for variables used within a mixin @content directive?

0
votes

I'm cleaning up all my analysis warnings in my theme.scss file. Though I am not sure how to clear this one...

I have a @mixin called accent-colors which simply loops through a sass map of colours by key/value, and wraps the @content directive input with a .accent-#{$key} parent class selector.

@mixin accent-colors {
  @each $key, $value in $accent-colors {
    $accent-name: $key !global;
    $accent-color: $value !global;
    .accent-#{$key} & {
      @content
    }
  }
}

This @mixin accent-colors is located in a separate file _mixins.scss which is imported into theme.scss using @import "mixins".

The @content directive allows variables to be passed into this via @include accent-colors { }

Here is an example...

.button
  @include accent-colors {
    color: $accent-color;
  }
}

The above sass code works fine, but I get this analysis warning in my IDE (phpstorm) in the theme.scss file...

enter image description here

Is there a way to some how suppress this IDE analysis warning in my theme.scss file?


Many Thanks

1
sassphpstorm

1 Answers

2
votes

You can suppress it with comment:

.button {
  //noinspection SassScssUnresolvedVariable
  @include accent-colors {
    color: $accent-color;
  }
}

see https://www.jetbrains.com/help/phpstorm/disabling-and-enabling-inspections.html#suppress-in-editor