0

I am using scsslint to validate my scss, I am getting this error bellow, what is the best way to fix that?

[W] ColorVariable: Color literals like rgba(0, 0, 0, 0.75) should only be used in variable declarations; they should be referred to via variable everywhere else.

 @mixin box-shadow-new($value) {
      -webkit-box-shadow: $value;
      -moz-box-shadow: $value;
      box-shadow: $value;
    }



 .btn-exit {
      @include box-shadow-new(4px 3px 26px -6px rgba(0, 0, 0, .75));
      background-color: $button-bg-main;
      border-color: $button-bg-main;
      color: $button-color-main;
    }
raduken
  • 2,091
  • 16
  • 67
  • 105

1 Answers1

1

That's telling you that the color should be set as a variable rather than written directly in the style. So in your variables.scss file, or wherever you are grouping variables (you are, right? here's one way), do something like:

$box-shadow-color: rgba(0, 0, 0, .75)

I'd go further and recommend that the full box-shadow style be a variable so you can easily place that style anywhere and be consistent:

$box-shadow: 4px 3px 26px -6px rgba(0, 0, 0, .75);

Note that may warn you to put the color itself in a variable still. It gets to be very "nesting dolls" sometimes, but you'd theoretically be able to easily reuse that semi-transparent black again.

The mixin would then be called like:

@include box-shadow-new($box-shadow);
alexbea
  • 1,311
  • 14
  • 25