scsslint box-shadow sass mixin 像 rgba 验证这样的颜色文字

Question

我正在使用 scsslint 来验证我的 scss，我在下面收到这个错误，修复它的最佳方法是什么？

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

Answer 1

那是告诉你应该将颜色设置为变量而不是直接写在样式中。因此，在您的 variables.scss 文件中，或任何您对变量进行分组的地方（您是，对吗？here's one way），执行如下操作：

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

我会更进一步，建议将完整的框阴影样式作为一个变量，这样您就可以轻松地将该样式放置在任何地方并保持一致：

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

请注意，可能会警告您将颜色本身放入变量中。有时它变得非常 "nesting dolls"，但理论上您可以轻松地再次使用该半透明黑色。

mixin 的调用方式如下：

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

scsslint box-shadow sass mixin 像 rgba 验证这样的颜色文字

scsslint box-shadow sass mixin Color literals like rgba validation

css

sass

scss-lint