scsslint box-shadow sass mixin Цветовые литералы, такие как проверка RGBA

Question

Я использую scsslint для проверки моего scss, я получаю эту ошибку ниже, каков наилучший способ исправить это?

[W] ColorVariable: цветные литералы, такие как rgba(0, 0, 0, 0.75) должен использоваться только в объявлениях переменных; на них следует ссылаться через переменную везде.

 @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;
    }

Answer 1

Это говорит о том, что цвет должен быть задан как переменная, а не записан непосредственно в стиле. Так в вашем variables.scss файл, или где вы группируете переменные (вы, верно? вот один из способов), сделайте что-то вроде:

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

Я бы пошел дальше и порекомендовал, чтобы полный стиль box-shadow был переменной, чтобы вы могли легко разместить этот стиль в любом месте и быть последовательными:

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

Обратите внимание, что может предупредить вас, чтобы поместить сам цвет в переменную еще. Иногда это могут быть очень "матрешки", но теоретически вы сможете снова легко использовать этот полупрозрачный черный.

Mixin будет называться как:

@include box-shadow-new($box-shadow);