Sass中CSS @property替代方案及渐变角度变量问题排查

你的代码核心问题出在**@property的语法错误以及可能的Sass变量未正确定义/作用域问题**，以下是修复方案：

1. 修正@property的声明语法 #

你代码里的syntax: "<angle>"是HTML转义后的写法，在Sass中应该直接写<angle>，同时确保@property的缩进语法正确（Sass缩进语法不需要大括号，但属性行要保持正确缩进）：

@property --gradient-angle
  syntax: "<angle>"
  initial-value: 0deg
  inherits: false

2. 确保Sass颜色变量已定义 #

$color-3、$color-4、$color-6这些Sass变量必须在使用前定义，比如在文件开头添加（替换成你实际需要的颜色值）：

$color-3: #f06
$color-4: #4facfe
$color-6: #00f2fe

3. 完整修复后的代码 #

// 定义Sass颜色变量
$color-3: #f06
$color-4: #4facfe
$color-6: #00f2fe

// 正确声明CSS自定义属性
@property --gradient-angle
  syntax: "<angle>"
  initial-value: 0deg
  inherits: false

.card::before, 
.card::after
  content: ""
  position: absolute
  inset: -0.5rem
  z-index: -1
  border-radius: inherit
  background: conic-gradient(var(--gradient-angle), $color-3, $color-4, $color-6, $color-4, $color-3)
  animation: rotation 20s linear infinite

.card::after
  filter: blur(3.5rem)

@keyframes rotation
  0%
    --gradient-angle: 0deg
  100%
    --gradient-angle: 360deg

关键说明 #

• 不是Sass功能不如原生CSS，而是你误用了HTML转义字符在Sass代码中，导致@property的syntax属性无效，浏览器无法正确识别--gradient-angle的类型，间接影响了渐变的渲染。
• Sass变量（$xxx）是编译时替换，而CSS自定义属性（--xxx）是运行时生效，两者可以正常混用，只要变量提前定义且作用域正确。

内容的提问来源于stack exchange，提问作者TVW96