如何将 CSS @property 与 scss 一起使用？

Question

我想用特定语法声明一个自定义变量，例如：

@property --colorPrimary {
  syntax: "<color>";
  initial-value: magenta;
  inherits: false;
}

这样我就可以为属性设置动画，但是这段代码似乎被 scss 忽略了。

Answer 1

快速玩一下https://sass-lang.com/playground，如果有帮助的话我想出了这个。

@mixin property($variable: variable, $syntax: "<number>", $inherits: true, 
$initial-value: 0){
  @property --#{$variable} {
    syntax: $syntax;
    inherits: $inherits;
    initial-value: $initial-value;
  }
}

@include property(colour-primary-hue, "<number>", false, 255)

输出

@property --colour-primary-hue {
  syntax: "<number>";
  inherits: false;
  initial-value: 255;
}