如何以符合 scss 的方式编写 linear-gradient @mixin -webkit

Question

我正在尝试编写线性渐变样式，但是 visual studio 代码给我一个警告

Also define the standard property 'mask-image' for compatibiity

Also define the standard property 'mask-size' for compatibiity

网站加载正常，但我有办法让警告消失吗？

谢谢！

@mixin mask-image($shine) {
-webkit-mask-image: $shine;
-webkit-mask-size: 200%;
}

h1 {
    font-family: "Berkshire Swash";
    font-size: 3rem;
    text-align: center;
    animation: shine 2s linear infinite;
    @include mask-image(linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%));
}

@keyframes shine {
    from { -webkit-mask-position: 150%; }
    to { -webkit-mask-position: -50%; }
  }

Answer 1

简单如下：

@mixin mask-image($shine) {
mask-image: $shine;
mask-size: 200%;
-webkit-mask-image: $shine;
-webkit-mask-size: 200%;
}

h1 {
    font-family: "Berkshire Swash";
    font-size: 3rem;
    text-align: center;
    animation: shine 2s linear infinite;
    @include mask-image(linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%));
}

@keyframes shine {
    from { -webkit-mask-position: 150%;mask-position: 150%; }
    to { -webkit-mask-position: -50%;mask-position: -50%; }
  }

如何以符合 scss 的方式编写 linear-gradient @mixin -webkit

How to I write linear-gradient @mixin -webkit in scss compliant way

css

sass

scss-mixins