如何以符合 scss 的方式编写线性渐变 @mixin -webkit

Question

我正在尝试编写线性渐变样式，但 Visual Studio 代码给了我一个警告

同时为兼容性定义标准属性“mask-image”

同时为兼容性定义标准属性“mask-size”

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

谢谢！

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